❤
npm
Sign UpSign In

ugly-ui

1.1.8 • Public • Published

背景介绍

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

loading

<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-索引

Readme

Keywords

none

Package Sidebar

Install

npm i ugly-ui

Weekly Downloads

1

Version

1.1.8

License

none

Unpacked Size

1.97 MB

Total Files

12

Last publish

Collaborators

  • amateurprogrammer
Try on RunKit
Report malware