Ugly-ui NPM | npm.io

背景介绍

ugly 据 Google 翻译，此词意为 #@$%$%$#%$#，emmmmmmmm...，很符合这个ui。

项目介绍

总得写点什么吧

API

button

<template>
  <ugly-button>buttin</ugly-button>
</template>

Button Attributes

参数	说明	类型	可选值	默认值
type	类型	String	primary / success / warning / danger / info / text	—
size	尺寸	String	medium / small / mini	—
round	是否圆角按钮	Boolean	—	false
disabled	是否禁用状态	Boolean	—	false
nativeType	原生 type 属性	String	button / submit / reset	button

checkbox

<template>
  <ugly-checkbox v-model="checkbox">checkbox</ugly-checkbox>
  <ugly-checkbox @input="getValue" true-label="1" false-label="2">true-label & false-label</ugly-checkbox>
</template>
<script>
export default {
  data () {
    return {
      checkbox: true
    }
  },
  methods: {
    getValue (value) {
      // value输出1或2
    }
  }
}
</script>

Checkbox Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
true-label	选中时的值	String / number	—	—
false-label	没有选中时的值	Boolean / number	—	false
disabled	是否禁用状态	Boolean	—	false
name	原生 name 属性	String	—	—
checked	当前是否勾选	Boolean	—	false

radio

<template>
  <ugly-radio v-model="radio" label="2">radio</ugly-radio>
</template>
<script>
export default {
  data () {
    return {
      radio: '1'
    }
  }
}
</script>

Radio Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
disabled	是否禁用状态	Boolean	—	false
name	原生 name 属性	String	—	—

input

<template>
  <ugly-input v-model="input1" placeholder="请输入内容" size="medium" :maxlength="5" borders radius clearable></ugly-input>
  <ugly-input v-model="textarea1" type="textarea" placeholder="请输入内容"></ugly-input>
</template>
<script>
export default {
  data () {
    return {
      input1: '这是input框',
      textarea1: '这是textarea框'
    }
  }
}
</script>

Input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text\textarea	text
value / v-model	绑定值	string / number	—	—
disabled	是否禁用状态	Boolean	—	false
name	原生 name 属性	String	—	—
maxlength	最大输入长度	number	—	—
placeholder	输入框占位符	string	—	—
clearable	是否可清空	boolean	—	false
size	text的尺寸	string	medium / small / mini	—
readonly	是否只读	boolean	—	false
form	原生属性	string	—	false

input-number

<template>
  <ugly-input-number v-model="input_number" :min="1" :max="10" :precision="2" :step="0.1">input-number</ugly-input-number>
</template>
<script>
export default {
  data () {
    return {
      input_number: '1'
    }
  }
}
</script>

Input-number Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	—	—
disabled	是否禁用状态	Boolean	—	false
name	原生 name 属性	String	—	—
placeholder	输入框占位符	string	—	—
min	允许的最小值	number		-infinity
max	允许的最大值	number		infinity
precision	数值精度	number		—
step	计数器步长	number		1
size	text的尺寸	string	medium / small / mini	—
controls	是否使用控制按钮	boolean		true
controls-position	控制按钮位置	string	right	true
radius	是否圆角	boolean		—

select

<template>
  <ugly-select v-model="value" @change="selectChange" @optChange="optionChange" :datas="options" placeholder="请选择"></ugly-select>
</template>
<script>
export default {
  data () {
    return {
      options:[
        [
          {value: '2019',label: '2019年'}, {value: '2020',label: '2020年'}
        ],
        [
          {value: '1',label: '1月'},{value: '2',label: '2月'},{value: '3',label: '3月'},{value: '4',label: '4月'},{value: '5',label: '5月'},{value: '6',label: '6月'},{value: '7',label: '7月'},{value: '8',label: '8月'},{value: '9',label: '9月'},{value: '10',label: '10月'},{value: '11',label: '11月'},{value: '12',label: '12月'}
        ],
        [
          {value: '1',label: '1日'},{value: '2',label: '2日'}{value: '3',label: '3日'}{value: '4',label: '4日'}{value: '5',label: '5日'}{value: '6',label: '6日'}{value: '7',label: '7日'}{value: '7',label: '7日'}{value: '8',label: '8日'}{value: '9',label: '9日'}{value: '10',label: '10日'}{value: '11',label: '11日'}{value: '12',label: '12日'}{value: '13',label: '13日'}{value: '14',label: '14日'}{value: '15',label: '15日'}{value: '16',label: '16日'}{value: '17',label: '17日'}{value: '18',label: '19日'}{value: '20',label: '20日'}{value: '21',label: '21日'}{value: '22',label: '22日'}{value: '23',label: '23日'}{value: '24',label: '24日'}{value: '25',label: '25日'}{value: '26',label: '26日'}{value: '27',label: '27日'}{value: '28',label: '28日'}{value: '29',label: '29日'}{value: '30',label: '30日'}{value: '31',label: '31日'}
        ]
      ],
      value: ''
    }
  },
  method: {
    // 年月日联动
    optionChange (type, curIndex, preIndex) {
      let options = this.options
      const days = (y, m) => {
        return new Date(y, m, 0).getDate()
      }
      switch (type) {
        case 1:
          let dayArray1 = []
          const y1 = options[0][curIndex].value
          const m1 = 1
          for (let i = 1; i <= days(y1, m1); i++) {
            dayArray1.push({value: +i, label: i + '日'})
          }
          options[2] = dayArray1
          this.$set(options, 2, dayArray1)
          break
        case 2:
          let dayArray2 = []
          const y2 = options[0][preIndex].value
          const m2 = options[1][curIndex].value
          for (let i = 1; i <= days(y2, m2); i++) {
            dayArray2.push({value: +i, label: i + '日'})
          }
          options[2] = dayArray2
          this.$set(options, 2, dayArray2)
          break
        default: break
      }
      this.options = options
    }
  }
}
</script>

select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string/number	—	—
disabled	是否禁用状态	Boolean	—	false
placeholder	输入框占位符	string	—	—
datas	下拉选项	Array=[Array={value: 'string',label: 'label'},Array,Array]	right	—

message

<template>
  <div>
    <div @click="alertMessage">打开message</div>
    <div @click="closeMessage">关闭message</div>
  </div>
</template>
<script>
export default {
  methods: {
    alertMessage () {
      this.$message({message:'这是message', duration: 5000})
    },
    closeMessage () {
      this.$message.close()
    }
  }
}
</script>

Message options

参数	说明	类型	可选值	默认值
message	信息	String	—	—
duration	显示时间	number	—	3000

<template>
  <div>
    <div @click="alertLoading">打开Loading</div>
    <div @click="closeLoading">关闭Loading</div>
  </div>
</template>
<script>
export default {
  methods: {
    alertLoading () {
      this.$loading({duration: 5000})
    },
    closeLoading () {
      this.$loading.close()
    }
  }
}
</script>

Loading options

参数	说明	类型	可选值	默认值
duration	显示时间	number	—	3000

scroll

<template>
  <div class="scroll-exp1">
    <ugly-scroll
      id="thescrollplace2"
      ref="thescrollplace2"
      @pullDownHandle="pullDownHandle2"
      @pullUpHandle="pullUpHandle2"
      :pull-down="true"
      :pull-up="true">
        <ul class="ugly-scroll-ul-y">
          <li v-for="(list, index) in lists2" :key="index">{{list}}</li>
        </ul>
      </div>
      <!-- 重写下拉过程提示 -->
      <template slot="pullDowningText">
        <span>下拉中提示语</span>
      </template>
      <!-- 重写下拉结束提示 -->
      <template slot="pullDownedText">
        <span>下拉结束示语</span>
      </template>
      <!-- 重写上拉过程提示 -->
      <template slot="pullUpingText">
        <span>上拉中提示</span>
      </template>
      <!-- 重写上拉结束提示 -->
      <template slot="pullUpedText">
        <span>上拉结束提示</span>
      </template>
    </ugly-scroll>
  </div>
</template>
<script>
export default {
  data () {
    return {
      lists2: [1,2,3,4,5,6,7,8]
    }
  },
  methods: {
    pullDownHandle2 () {
      const _this = this
      let lists2 = []
      const times = Math.round((Math.random() * 10))
      for (let i = 0; i <= times; i++) {
        lists2.push(Math.round((Math.random() * 10)))
      }
      setTimeout(() => {
        _this.lists2 = lists2
        _this.$refs.thescrollplace2.pullDownBoolean(false)
      }, 1000)
    },
    pullUpHandle2 () {
      const _this = this
      setTimeout(() => {
        _this.lists2.push(9)
        _this.$refs.thescrollplace2.pullUpBoolean(false)
      }, 1000)
    }
  }
}
</script>
<style>
.scroll-exp2{
  width: 100%;
  height: 400px;
  overflow: auto;
}
.ugly-scroll-ul-y li{
  height: 100px;
  border-bottom: 1px solid #fff;
  background-color: #efefef;
}
</style>

scroll options

参数	说明	类型	可选值	默认值
id	父级id	string	—	必填
ref	滚动内容ref	string	—	必填
pull-down	是否显示下拉	Boolean	—	false
pull-up	是否显示上拉	Boolean	—	false
scroll-type	滚动方向	String	X\Y	Y

scroll slot

参数	说明	类型	可选值	默认值
pullDowningText	自定义下拉过程提示	html	—	—
pullDownedText	自定义下拉结束提示	html	—	—
pullUpingText	自定义上拉过程提示	html	—	—
pullUpedText	自定义上拉结束提示	html	—	—

scroll Handle

参数	说明	类型	参数
pullDownHandle	下拉操作	function	—
pullUpHandle	下拉操作	function	—
pullDownBoolean	改变下拉状态	function	Boolean
pullUpBoolean	改变下拉状态	function	Boolean

swiper

<template>
  <div>
    <ugly-swiper
      id="swiper1"
      attr-class="swiper1-height"
      ref="swiper1"
      @swiperHandle="swiperhandles"
      :loop="true"
      :auto-play="4000"
      scroll-type="X"
      :pagination="true">
      <template slot="swiperWrapper">
        <div class="ugly-swiper-wrapper">
          <div v-for="(slide, index) in slides1" :key="index" @click="swiperalert(index)" class="ugly-swiper-slide slides">{{slide}}</div>
        </div>
      </template>
    </ugly-swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      slides1: [1,2,3,4,5]
    }
  },
  methods: {
    appendSlide () {
      this.slides.push(2,3,4)
      this.$refs.swiper1.updateWrapper()
    },
    slideToSlides1 (index) {
      this.$refs.swiper1.slideTo(index)
    }
  }
}
</script>
<style>
.swiper1-height{
  height: 200px;
}
</style>

scroll options

参数	说明	类型	可选值	默认值
id	父级id	string	—	必填
ref	滚动内容ref	string	—	必填
attr-class	样式名	Boolean	—
loop	是无限滚动	Boolean	—	false
auto-play	是否自动滚动	Boolean, Number		Y
scroll-type	轮播方向	string	X/Y	X
pagination	是否显示分页器	Boolean		false

scroll slot

参数	说明	类型	可选值	默认值
swiperWrapper	轮播内容	html	—

scroll Handle

参数	说明	类型	参数
swiperHandle	动画结束是回调函数	function	i-当前的index
updateWrapper	重置轮播函数	function	-
slideTo	轮播到某索引函数	function	i-索引