npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

anso-ui

v1.3.13

Published

```bash npm install -S vue element-ui anso-ui ```

Downloads

83

Readme

组件库使用方式

组件库引入

npm install -S vue element-ui anso-ui
// main.js

import Vue from 'vue'
import Element from 'element-ui'
// 引入 AnsoUI
import Anso from 'anso-ui'

Vue.use(Element)
Vue.use(Anso)

样式引入

手动在项目入口文件手动引入。

// 根据设计稿调整的element样式主题:
import 'anso-ui/assets/elTheme/theme/index.css'

// anso-ui组件库自带样式主题:
import 'anso-ui/assets/customTheme/index.sass'
import 'anso-ui/lib/anso-ui.css'

// anso-ui组件库自带的icon
import 'anso-ui/assets/icon/iconfont.css'

如项目中存在其他关于element-ui的样式调整,请将anso-ui/assets/elTheme/config.json文件上传element提供的在线主题编辑器,修改后在项目中替换以上第一行的样式引入。【查看element官方文档说明

icon 引入

直接使用组件库封装好的AnsoIcon组件,引入的是iconfont上的Anso图标库:

修改图标库,暂只支持www.iconfont.cn 上的icon

anso-ui中存在默认的iconfont.css文件, 如果不需要替换为自己项目中的icon样式, 则可直接使用anso-ui提供的icon(具体图标详见默认示例) 【引入方式的代码示例说明查看

如果需要替换为自己的iconfont.css文件, 则将iconfont.css文件放入自己项目的assets/icon/文件夹中(如果没有该文件夹,可自己新增),找到项目的main.js全局引用核心文件, 将其中原本对icon文件的引用(import 'assets/icon/iconfont.css'), 替换为自己提供的iconfont.css的存放路径

全局配置

在引入anso-ui时,可以传入一个全局配置对象。

该对象目前支持的配置说明,按照anso-ui引入方式,具体操作如下:

如有新增的可全局配置项,请在下方补充

import Ansoui from 'anso-ui'

Vue.use(Ansoui, {
 // 表格初始化选项
  table: {},
  // 表单初始化选项
  form: {
    // space 配置操作表单间距,默认24px
    space: '80px',
    // readOnlySpace 配置只读表单间距,默认8px
    readOnlySpace: '0',
    // 配置表单上下外边距,默认24px
    formVerticalMargin: '',
    // 表单上传接口全局默认配置
    fileUploadResource: '',
    // 表单文件下载、预览接口全局默认配置
    fileDownloadResource: '',
    // 表单文件下载,预览接口类型, 通过id展示或者shortUrl展示
    fileDownloadResourceType: '',
    // 文件上传接口全局配置信息重新定义
    uploadResourceConfig: {
      type: Function,
      default: ({ url, params }) => ({
        url: '55',
        method: 'post',
        headers: {
          'Anso-Token': '123'
        },
        data: params
      })
    },
    // 文件上传输出值的重新配置响应
    uploadTransformResponse: {
      type: Function,
      default: ({ files }) => { // 上传組件默認輸出文件的數組id
        return files.map(file => file.shortUrl)
      }
    }
  }
})

组件库示例代码及文档说明

查看源码及文档说明

1613800251206

右上角两个标签,分别是:开启示例代码、开启组件文档说明

版本号管理

x.x.x 分别表示:稳定版本(里程碑/大版本). 新大组件(form,table同级别的组件类型) . 优化次数

更新策略:

  1. 大版本更新:老版本可能面临一些api更改导致无法使用

  2. 中间一位版本更新:有新增新类型的组件、增加新示例文档、增加新api

  3. 最后一位小版本更新:bugfix、优化、原先api无更改

!!! 注意文档示例与api的同步修改。

问题集

问:装包后出现this.getOptions is not a function的问题。

sass-loader版本问题,npm install [email protected] -D 解决