lina-ui v0.0.33

linaUi

• 一个轻量的UI框架
• 配合@linahome/cli（lina指令），可以把指定的ui组件拉取下来，进行二次开发。

demo page

在线demo page预览

安装

npm i lina-ui -S
yarn add lina-ui

更新日志

CHANGELOG

issues

issues

引入

/** 引入 */
import linaUi from 'lina-ui'
import 'lina-ui/dist/lina-ui.min.css'

Vue.use(linaUi)

组件

类型：操作反馈

Toast

基本用法

export default {
  mounted() {
    this.$toast('提示信息')
    this.$toast({
        message: '提示信息',
        duration: 3000 // 时长
    })
  }
}

在非vue的js文件引入

import linaUi from 'lina-ui'

linaUi.Toast({ message: '开启loading', duration: 1500 })

> API

| 名称        | 说明   |  类型  | 默认值 |
| --------   | -----:  | :----:  | :----:  |
| option        |    如果为Object，则分option.duration和option.message，如果是String，则为option.message	    |  String | Object  | 无 |
| option.duration	     | 展示时长（毫秒） |   Number	  | 2000 |
| option.message        |   文案	   |   String   | 无 |


## <font color=#cf3e8e>Loading</font>
> 基本用法
```javascript
export default {
  mounted() {
    this.$loading.show() // 显示
    this.$loading.show('信息上传中') // 自定义文案
    this.$loading.show({
        message: '信息上传中'
    }) // 自定义文案
    this.$loading.show({
        isHideMessage: false
    }) // 隐藏文本提示
    this.$loading.setMessage('自定义文本') // 该方法可以设置显示中的loading的文案
    this.$loading.hide() // 隐藏
  }
}

API

Dialog

基本用法

this.$dialog({
    title: '标题',
    message: '内容',
    footer: { // 按钮的位置可以交换的，把confirm和cancel换下位置就好
        confirm: {
            text: '确认'
        },
        cancel: {
            text: '取消'
        }
    }
})

ID

同一个页面中，id相同的Dialog的DOM只会同时存在一个，不指定id时，id的默认值为dialog-default-id。

this.$dialog({
    id: 'my-dialog',
    title: '标题',
    message: '内容',
    footer: {
        confirm: {
            text: '确认'
        },
        cancel: {
            text: '取消'
        }
    }
})

隐藏底部按钮

有时候需要一些不能关闭的弹窗

this.$dialog({
    id: 'my-dialog'
    title: '标题',
    message: '内容',
    isHideFooter: true
})

一个按钮

this.$dialog({
    title: '标题',
    message: '内容',
    footer: {
        confirm: {
            text: '确认'
        }
    }
})

禁止点击蒙层关闭窗口

this.$dialog({
    title: '提示',
    message: '你点蒙层是没反应的',
    preventMaskClose: true
})

事件

this.$dialog({
    title: '标题',
    message: '内容',
    footer: {
        confirm: {
        text: '确认',
        callBack: function() {
                console.log('确认')
            } // 点击按钮的回调事件，自动关闭
        },
        cancel: {
        text: '取消',
        callBack: function () {
                console.log('取消')
            } // 点击按钮的回调事件，自动关闭
        }
    }
})

拓展的$confirm，返回promise（2019-05-08 新增）

// 默认配置，按钮为双按钮，一个文本是确认，一个文本是取消
this.$dialog.$confirm({
  title: '提示',
  message: '此操作将永久删除该文件, 是否继续?'
}).then(() => {
  console.log('confirm')
}).catch((error) => {
  console.log(error) // error 为‘cancel-close’的时候，说明点击了取消按钮，为‘mask-close’的时候，说明点击了蒙层关闭
})
// 定制按钮
this.$dialog.$confirm({
  title: '提示',
  message: '此操作将永久删除该文件, 是否继续?',
  // preventMaskClose: true, // 禁用点击蒙层
  footer: {
    confirm: {
      text: '确定'
    },
    cancel: { // 隐藏其中一个就是单按钮了
      text: '取消'
    }
  }
}).then(() => {
  console.log('confirm')
}).catch((error) => {
  console.log(error)
})
// 什么，你要单按钮？你要禁用点击蒙层？那就结合上面的demo，可以配置

隐藏关闭按钮(isHideClose)

  this.$dialog({
    title: '确定删除App？',
    message: '真的不考虑一下留着我吗，<br> 点击蒙层也是可以关闭弹窗',
    isHideClose: true,
    footer: {
      cancel: {
        text: '删除'
      },
      confirm: {
        text: '考虑'
      }
    }
  })

标签式写法

• 标签式demo1

<lina-dialog :dialog="dialog">
    <div slot="header">
        自定义头部
    </div>
    <div>
        自定义内容
    </div>
    <div>
        自定义内容
    </div>
    <div slot="footer">
        自定义按钮的dom以及事件
    </div>
</lina-dialog>

export default {
  data() {
    return {
      dialog: {
        title: '标题',
        isShow: false,
        footer: {
            confirm: {
            text: '确认',
            callBack: function() {} //点击按钮的回调事件
            },
            cancel: {
            text: '取消',
            callBack: function () { }
            }
        }
      }
    }
  }
}

• 标签式demo2

<!-- 活动规则 -->
<lina-dialog :dialog="ruleDialog">
    <!-- 自定义内容 -->
    <div class="rules">
    <p>1 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    <p>2 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    <p>3 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    <p>4 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    <p>4 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    <p>4 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
    </div>
</lina-dialog>

export default {
  data() {
    return {
      ruleDialog: {
        id: 'rule-dialog',
        title: '活动规则',
        isShow: true,
        footer: {
          confirm: {
            text: '确定'
          }
        }
      }
    }
  }
}

.rules {
    text-align: left;
    font-size: 28px;
    font-weight: 400;
    color: #929292;
    line-height: 44px;
}

API

Popup

基本用法

<!-- 自定义 -->
<lina-popup :isShow.sync="isShow1" :isHideClose="isHideClose1" :preventMaskClose="preventMaskClose1" :closeCallBack="() => {this.isShow1 = !this.isShow1}">
  <p style="color: #fff;">这是一个Popup，空空如也</p>
</lina-popup>
<!-- :closeCallBack 传递回调 -->
<lina-popup :isShow.sync="isShow2" :closeCallBack="handle2CloseCallBack">
    <p style="color: #fff;">这是一个Popup，关闭之前有事件</p>
</lina-popup>
<!-- @closeCallBack 触发回调 -->
<lina-popup :isShow.sync="isShow2" @closeCallBack="handle2CloseCallBack">
  <p style="color: #fff;">这是一个Popup，关闭之前有事件</p>
</lina-popup>
<!-- preventMaskClose 禁止点击蒙层关闭popup -->
<lina-popup :isShow.sync="isShow1" :preventMaskClose="preventMaskClose1" :closeCallBack="() => {this.isShow1 = !this.isShow1}">
  <p style="color: #fff;">这是一个Popup，空空如也</p>
</lina-popup>

export default {
  data () {
    return {
      isShow1: false,
      isShow2: false,
      preventMaskClose1: false, // 是否禁止点击蒙层关闭popup
      isHideClose1: false // 是否显示close按钮
    }
  },
  methods: {
    handle1 () {
      this.isShow1 = !this.isShow1
    },
    handle2 () {
      this.isShow2 = !this.isShow2
    },
    handle2CloseCallBack () {
      alert('关闭Popup')
    }
  }
}

Prop

ActionSheet

基本用法

<!-- demo1 普通用法 -->
<lina-action-sheet :menu-items="demo1.menuItems" :cancelText="demo1.cancelText" :isShow.sync="demo1.isShow" @choose="chooseItem"/>
<!-- demo2 加上取消文本，并添加关闭回调事件 -->
<lina-action-sheet :menu-items="demo2.menuItems" :cancelText="demo2.cancelText" :isShow.sync="demo2.isShow" @choose="chooseItem" @close="closeDemo2"/>
<!-- demo3 禁止点击蒙层关闭 -->
<lina-action-sheet :menu-items="demo3.menuItems" :cancelText="demo3.cancelText" :isShow.sync="demo3.isShow" @choose="chooseItem" :preventMaskClose="demo3.preventMaskClose"/>
<!-- demo4 高亮已选项 -->
<lina-action-sheet :menu-items="demo4.menuItems" :cancelText="demo4.cancelText" :isShow.sync="demo4.isShow" @choose="chooseItemDemo4" :chooseTagValue="demo4.choose"/>

export default {
  data () {
    return {
      demo1: {
        isShow: false,
        menuItems: [
          {
            'name': '高德地图',
            'value': 0
          },
          {
            'name': '百度地图',
            'value': 1
          }
        ]
      },
      demo2: {
        isShow: false,
        cancelText: '取消',
        menuItems: [
          {
            'name': '高德地图',
            'value': 0
          },
          {
            'name': '百度地图',
            'value': 1
          }
        ]
      },
      demo3: {
        isShow: false,
        preventMaskClose: true,
        cancelText: '取消',
        menuItems: [
          {
            'name': '高德地图',
            'value': 0
          },
          {
            'name': '百度地图',
            'value': 1
          }
        ]
      },
      demo4: {
        choose: '请选择',
        cancelText: '取消',
        isShow: false,
        menuItems: [
          {
            'name': '高德地图',
            'value': 0
          },
          {
            'name': '百度地图',
            'value': 1
          }
        ]
      }
    }
  },
  methods: {
    handle1 () {
      this.demo1.isShow = true
    },
    chooseItem (item) {
      console.log(item)
    },
    handle2 () {
      this.demo2.isShow = true
    },
    closeDemo2 () {
      alert('您选择了关闭')
    },
    handle3 () {
      this.demo3.isShow = true
    },
    handle4 () {
      this.demo4.isShow = true
    },
    chooseItemDemo4 (item) {
      this.demo4.choose = item.name
    }
  }
}

Prop

Event

PullRefresh

基本用法

<lina-pull-refresh
  @refresh="refresh"
  v-bind="pullRefreshSetting"
>
  <div class="pull-content">
    <div class="demo-list-box e-unfold">
      <h4 class="type">基本用法</h4>
      <ul class="demo-list">
        <li class="demo-list-item">
          <a @click="handle1" class="router-link">设置下拉过程文案（pullingText）</a>
        </li>
        <li class="demo-list-item">
          <a @click="handle2" class="router-link">设置释放过程文案（loosingText）</a>
        </li>
        <li class="demo-list-item">
          <a @click="handle3" class="router-link">设置加载过程文案（loadingText）</a>
        </li>
      </ul>
    </div>
    <img src="https://dummyimage.com/600x1000/000/fff" alt="">
  </div>
</lina-pull-refresh>

export default {
  name: 'demo-pull-refresh',
  data () {
    return {
      count: 0,
      pullRefreshSetting: {
      }
    }
  },
  methods: {
    refresh ({ done }) {
      this.count++
      this.$toast('刷新成功')
      setTimeout(() => {
        done() // 下拉刷新时触发，在refresh事件一定要执行done()，才能去除loading状态，用于下拉后等待请求
      }, 1000)
    },
    handle1 () {
      this.pullRefreshSetting.pullingText = '下拉下拉下拉快下拉'
      this.$toast('设置成功')
    },
    handle2 () {
      this.pullRefreshSetting.loosingText = '释放我，即可刷新刷新'
      this.$toast('设置成功')
    },
    handle3 () {
      this.pullRefreshSetting.loadingText = '加载中，请等待'
      this.$toast('设置成功')
    }
  }
}

Prop

Event

类型：视图组件

PopCurtain

基本用法

<!-- 普通用法 -->
<lina-pop-curtain :dialog.sync="dialog1"/>
<!-- 内嵌slot -->
<lina-pop-curtain :dialog.sync="dialog2">
  <img style="width: 300px;" src="https://dummyimage.com/600x400/ff45ff/ffffff" alt="">
</lina-pop-curtain>
<!-- 设置关闭按钮 -->
<lina-pop-curtain :dialog.sync="dialog3" />
<!-- 监听点击幕帘内容事件 -->
<lina-pop-curtain :dialog.sync="dialog4" @clickCurtain="handleClickDialog" />

export default {
  name: 'demo-popCurtain',
  data () {
    return {
      dialog1: {
        image: 'https://dummyimage.com/600x400/ff45ff/ffffff',
        isShow: false
      },
      dialog3: {
        image: 'https://dummyimage.com/600x400/ff45ff/ffffff',
        isShow: false
      },
      dialog2: {
        isShow: false
      },
      dialog4: {
        image: 'https://dummyimage.com/600x400/ff45ff/ffffff',
        link: 'http://www.baidu.com',
        isShow: false
      }
    }
  },
  methods: {
    handle1 () {
      this.dialog1.isShow = true
    },
    handle2 () {
      this.dialog2.isShow = true
    },
    handle3 () {
      this.dialog3.isShow = true
      this.dialog3.closeBtnPosition = 'top'
    },
    handle4 () {
      this.dialog4.isShow = true
    },
    handleClickDialog (dialog) {
      this.$toast('即将跳转链接')
      setTimeout(() => {
        window.location.href = dialog.link
      }, 2000)
    }
  }
}

Prop

CarouselNotice

基本用法

<!-- 上下跑马灯 -->
<lina-carousel-notice :dataList="dataList" :isNeedHorizontal="false" :isShow="true"/>
<!-- 先左右再上下跑马灯（默认） -->
<lina-carousel-notice :dataList="dataList" :isShow="true"/>
<!-- 显示关闭按钮 -->
<lina-carousel-notice :dataList="dataList" :isShowClose="true" :isShow="true" @close="close3"/>
<!-- 设置横行滚动速度 -->
<lina-carousel-notice :dataList="dataList" :slideSpeed="100" :isShow="true"/>
<!-- 设置内容文本样式 -->
<lina-carousel-notice :dataList="dataList" :textStyle="textStyle" :isShow="true"/>
<!-- 设置外框样式 -->
<lina-carousel-notice :dataList="dataList" :boxStyle="boxStyle" :isShow="true"/>

export default {
  name: 'demo-carouselNotice',
  data () {
    return {
      textStyle: { // 设置内容文本样式
        color: '#20aadf',
        fontWeight: 300
      },
      boxStyle: { // 设置外框样式
        height: '36px',
        borderRadius: '30px',
        opacity: 0.8,
        backgroundColor: '#0c0c0c'
      },
      dataList: [
        {
          id: 0,
          title: '这是轮播公告栏',
          tag: {
            title: '基础'
          }
        },
        {
          id: 1,
          title: '请注意，请注意，如果字数溢出，则先左右轮播，然后再上下轮播'
        },
        {
          id: 2,
          title: '被设置了tag的内容和颜色',
          tag: {
            title: '重点',
            borderColor: '#20aadf',
            color: '#20aadf'
          }
        }
      ],
      data1: {
      }
    }
  },
  methods: {
    close3 () {
      this.$toast('close, you can do something')
    }
  }
}

Prop

Event

Picker

基本用法

<!-- @change通讯 -->
<lina-picker :slots="slots1" @change="handleChange1"></lina-picker>
<!-- sync通讯 -->
<lina-picker :slots="slots2" :value.sync="value2"></lina-picker>
<!-- v-model通讯 -->
<lina-picker :slots="slots3" v-model="value3"></lina-picker>
<!-- 带按钮 -->
<lina-picker :slots="slots3" :head="true" @confirm="handleConfirm" @cance="handleCance"></lina-picker>

export default {
  name: 'demo-pull-refresh',
  data () {
    return {
      slots1: [
        []
      ],
      value1: [],
      slots2: [
        {
          defaultIndex: 2, // 默认选中
          values: [
            {
              name: '猪妹',
              value: 1
            },
            {
              name: '火影忍者',
              value: 2
            },
            {
              name: '小明',
              value: 3
            },
            {
              name: '大厦',
              value: 4
            },
            {
              name: '大哥大',
              value: 5
            },
            {
              name: '我是谁',
              value: 6
            },
            {
              name: '阿打算',
              value: 7
            },
            {
              name: '阿达',
              value: 8
            }
          ]
        },
        [
          '阿萨德',
          '阿萨德12',
          '阿斯蒂芬',
          'v',
          '啊实打实的',
          '阿达',
          '阿斯顿发斯蒂芬',
          '12我去安慰',
          '阿三哥发',
          'SADFSF'
        ]
      ],
      value2: [],
      slots3: [],
      value3: [],
      value4: []
    }
  },
  created () {
    this.addSlots1()
    this.addSlots3()
  },
  methods: {
    addSlots1 () {
      for (let i = 0; i < 1000; i++) {
        this.slots1[0].push(i)
      }
    },
    handleChange1 (value) {
      this.value1 = value
    },
    // 异步添加
    addSlots3 () {
      this.$set(this.slots3, 0, [])
      for (let i = 0; i < 1000; i++) {
        this.slots3[0].push(i)
      }
      setTimeout(() => {
        this.$set(this.slots3, 1, [])
        for (let i = 0; i > -100; i--) {
          this.slots3[1].push(i)
        }
      }, 500)
      setTimeout(() => {
        this.$set(this.slots3, 2, [])
        for (let i = 100; i > 0; i--) {
          this.slots3[2].push(i)
        }
      }, 1000)
    },
    handleConfirm (value) {
      this.value4 = value
    },
    handleCance () {
      alert('取消')
    }
  }
}

Prop

Prop -> slots

slots数组对象得情况下

slot | 名称 | 说明 | | -------- | -----: | | title | 标题插槽 |

Event

DatatimePicker

一些事件、prop、slot请参考Picker

基本用法

<!-- type：datetime（默认） -->
<lina-datetime-picker @confirm="handleConfirm1"></lina-datetime-picker>
<!-- type: date -->
<lina-datetime-picker type="date" @confirm="handleConfirm2"></lina-datetime-picker>
<!-- type: time -->
<lina-datetime-picker type="time" v-model="value3"></lina-datetime-picker>

export default {
  name: 'dom-date-time',
  data () {
    return {
      value1: '',
      value2: '',
      value3: ''
    }
  },
  methods: {
    handleConfirm1 (values) {
      this.value1 = values
    },
    handleConfirm2 (values) {
      this.value2 = values
    },
    handleCance1 () {
      alert('取消')
    }
  }
}

Prop

类型：通用函数

Preload

图片预加载 this.$preload.loadImgs

// 图片预加载 this.$preload.loadImgs
async handle1 () {
  let self = this
  self.$loading.show()
  /**
   * 预加载图片
   * @param {array | object} opts         如果opts是数组，则直接作为opts.urls处理
   * @param {array} opts.urls             图片链接
   * @param {function} opts.eachLoadFunc  每张图片加载完毕的回调，回调参数是percent（加载的百分数，1-100）
   * @param {function} opts.callback      所有图片加载完毕的回调
   * @param {function} opts.maxPercent    加载完毕后最大百分数,默认是100，需要设置的情形是，假如设置80，则先加载完成图片，百分数是80%，然后剩下20%，额外处理，例如加载视频或者其他东西
   * @returns Promise
   */
  await this.$preload.loadImgs({
    urls: [
      'http://img.daimg.com/uploads/allimg/190716/1-1ZG6160132.jpg',
      'http://img.daimg.com/uploads/allimg/190712/1-1ZG2164231.jpg',
      'http://img.daimg.com/uploads/allimg/190628/1-1Z62R30555.jpg',
      'http://qumi.inrice.top/carowner/images/zwlcr.jpg',
      'http://qumi.inrice.top/carowner/images/zhuzhuche.jpg',
      'http://img.daimg.com/uploads/allimg/190711/1-1ZG1002105.jpg',
      'http://img.daimg.com/uploads/allimg/190711/1-1ZG11IZ6.jpg',
      'http://img.daimg.com/uploads/allimg/190711/1-1ZG11H912.jpg',
      'http://img.daimg.com/uploads/allimg/190711/1-1ZG11FH5.jpg',
      'http://img.daimg.com/uploads/allimg/190711/1-1ZG1143T7.jpg',
      'https://cdn.dribbble.com/assets/art-banners/twisted-511f83427b2e298f5859b4a101073a4e05f7cd89f974cd103278640390a3599a.gif',
      'https://cdn.dribbble.com/users/2894633/screenshots/6785772/pottery_4x.jpg',
      'https://cdn.dribbble.com/users/1227650/screenshots/6784592/accord_4x.jpg'
    ],
    eachLoadFunc (percent) { // 每张图片加载完毕的回调，回调参数是percent（加载的百分数，1-100）
      console.log(percent)
      self.$loading.setMessage(percent)
    },
    callback () { // 所有图片加载完毕的回调
      self.$toast('加载完毕')
    }
  })
  self.$loading.hide()
}