hmmhack-ui

封装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