封装Vue组件库hack-ui

涉及，scss,插槽,组件通信,打包发布

1、button组件

1.1 参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | -------- | ---------------------------------- | -------- | ------- | | type | primary/success/waming/danger/info | String | default | | plain | 是否朴素按钮 | Boolean | false | | round | 是否圆角按钮 | Boolean | false | | circle | 是否圆形按钮 | Boolean | false | | disabled | 是否禁用按钮 | Boolean | false | | icon | 图表类名 | String | 无 |

1.2事件支持

| 事件名称 | 事件描述 | | -------- | -------- | | click | 点击事件 |

1.3 相关技术

this.$slot // 获取组件中所有的插槽

2、dialog组件

2.1 前置知识

# vue 过渡动画
# sync 修饰符
# 具名插槽与v-slot指令

2.2参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | :-----: | :------------------------: | :------: | :----: | | title | 对话框标题 | String | 提示 | | width | 宽度 | String | 50% | | top | 与顶部的距离 | String | 15vh | | visible | 是否显示dialog（支持sync） | Boolean | false |

2.3 事件支持

| 事件名 | 事件描述 | | ------ | ---------------- | | opened | 模态框显示的事件 | | closed | 模态框关闭的事件 |

2.4 插槽说明

| 插槽名称 | 插槽描述 | | -------- | ------------------ | | default | dialog的内容 | | title | dialog的标题 | | footer | dialog的底部操作区 |

2.5 相关技术

li+li {} // 选择的是除了第一li的所有li
.hack-dialog{
    &__header {} // 表示选择.hack-dialog__header
}
/*
	scoped会给当前组件的模板中所有元素都添加一个随机属性，并且会给组件中所有的样式，添加一个对应的属性选择器，目的是为了样式只给当前组件使用，形成一个独立的作用域
	因为button是父组件传进来的，所以随机的属性是父组件的，在子组件中修改父组件传过来的button样式，会修改失败，需要加上深度选择器，加上深度选择器之后，button的样式就不会添加随机的属性选择器了======================> /deep/ || ::v-deep
*/
 /deep/ .hack-button:first-child {
     margin-right: 20px;
}

// .sync语法糖，修改父组件的值
// .self修饰符，阻止冒泡

3、input组件

3.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ------------- | ------------------------ | -------- | ------ | | placeholder | 占位符 | String | 无 | | type | 文本框类型/text/password | String | text | | disabled | 禁用 | Boolean | false | | chearable | 是否清空按钮 | Boolean | false | | show-password | 是否显示密码切换按钮 | Boolean | false | | name | name属性 | String | 无 |

3.2 事件支持

| 事件名称 | 事件描述 | | -------- | ------------ | | blur | 失去焦点事件 | | change | 内容改变事件 | | focus | 获取焦点事件 |

3.3 相关技术

/*
	v-model实质上就是个语法糖，等价于 :value @input
	:value="username" @input="username = $event.target.value" === v-model
*/
<input class="hack-input__inner" :class="{'is-disabled':disabled}"
    :name="name"
    :type="type"
    :placeholder="placeholder"
    :disabled="disabled"
    :value="value" // v-model生成
    @input="handlerInput" // v-model生成@input事件
>
 handlerInput(e){
      this.$emit('input',e.target.value) // v-model自带@input事件，无需在父组件重新定义input方法
 }

4、switch组件

4.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ------------- | ------------------ | -------- | ------ | | v-model | 双向绑定 | Boolean | false | | name | name 属性 | String | text | | activeColor | 自定义激活的颜色 | String | '' | | inactiveColor | 自定义不激活的颜色 | String | '' |

4.2 事件支持

| 事件名称 | 事件描述 | | -------- | ------------------ | | change | change时触发的事件 |

5 radio组件

5.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | --------------- | ------------------ | ------ | | v-model | 双向绑定 | Boolean | false | | label | 单选框的value值 | String,num,boolean | '' | | name | name属性 | String | '' |

5.2 技术支持

// 双向绑定一个计算属性， 那么计算属性内部必须提供get和set方法
// <input v-model="model">
computed: {
    model: { // 如果双向绑定的值是一个计算属性，那么必须提供其get和set方法
      get(){
        return this.value
      },
      set(value){
        this.$emit('input',value)
      }
    }
  }    

6 radio-group && checkbox-group组件

5.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | -------- | ------------------ | ------ | | v-model | 双向绑定 | String,num,boolean | '' |

5.2 技术支持

/*
	provide:父组件在作用域链的范围内共享/广播数据
	inject：子孙组件在作用域链范围内接收数据
*/
provide(){// 父组件
    return {
        RadioGroup: this
    }
},
    
inject: { // 子孙组件
    RadioGroup: {
      default: '',
    }
},

6、封装成UI组件库

6.1 目录调整

• 根目录下创建两个文件夹packages,把src目录名改成examples

• packages: 用于存放所有的组件
  examples: 用于进行测试，把src改成examples

6.2 创建组件库并注册

• 把相关组件字体样式文件放入packages文件夹中

• packages中新建index.js,实现插件库必须的install方法

• import './fonts/font.scss'
    
  // 注册所有组件
  const requireComponent = require.context('./', true, /\.vue$/)
  const install = (Vue) => {
      if(install.installed) return
      install.installed;
      requireComponent.keys().forEach( filename => {
          const config = requireComponent(filename)
          const componentName = config.default.name
          Vue.component(componentName, config.default || config)
      })
  }
    
  // 判断是否直接引入文件，如果是，就不调用Vue.use()
  if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue)
  }
    
  export default {
    install
  }

• package.json的scripts下新增打包vue-cli脚手架命令,并指定打包入口

  • "lib": "vue-cli-service build --target lib packages/index.js"

• 运行 npm run lib