hmmhack-ui v0.1.0

封装Vue组件库hack-ui

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

1、button组件

1.1 参数支持

1.2事件支持

1.3 相关技术

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

2、dialog组件

2.1 前置知识

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

2.2参数支持

2.3 事件支持

2.4 插槽说明

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 参数支持

3.2 事件支持

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 参数支持

4.2 事件支持

5 radio组件

5.1 参数支持

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 参数支持

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