Skip to content

hengshanMWC/lina-ui

BranchesTags
 
 

Repository files navigation

linaUi

一个轻量的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 无

Loading

基本用法

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

名称 说明 类型 默认值
option 如果为Object，则分option.duration和option.message，如果是String，则为option.message String Object
option.isHideMessage 是否隐藏文案 boolean false
option.message 文案 String 无

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

名称 说明 类型 默认值
option.id 标识符，相同者共享一个实例 String Number
option.title 标题 String 无
option.isShow 是否显示弹窗 Boolean false
option.isUnlimitedHeight 内容高度超出，是否限制高度，设置滚动 Boolean false
option.isHideFooter 是否隐藏底部 Boolean false
option.isHideClose 是否右上角关闭按钮 Boolean false
option.preventAutoClose 是否禁止点击底部按钮后关闭窗口 Boolean false
option.preventMaskClose 是否禁止点击蒙层关闭窗口 Boolean false
option.theme 主题 String 默认为空，可选'gold'金色主题
option.footer 底部按钮的配置 Boolean false
option.footer.$name 底部按钮, $name是一个对象，名称可以自定义, Object 无
option.footer.$name.text 底部按钮的文本 String 无
option.footer.$name.callBack 底部按钮的回调事件 Function 无

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

名称 说明 类型 默认值
isShow 是否可见 Boolean false
isHideClose 关闭按钮可见 Boolean true
preventMaskClose 是否点击mask蒙层关闭 Boolean false
closeCallBack 关闭蒙层的回调事件 Function 无

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

名称 说明 类型 默认值
isShow 是否可见 Boolean false
menuItems 列表选项 Array []
cancelTxt 取消文案,若传值，则显示取消文案 String 无
preventMaskClose 是否点击mask蒙层关闭 Boolean false
chooseTagValue 已选值，如果填写，高亮显示 String 无

Event

名称 说明 回调参数
choose 选择之后触发 选中列表项
close 关闭时触发 无

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

名称 说明 类型 默认值
headHeight 顶部内容高度 Number 50
pullingText 下拉过程文案 String 下拉即可刷新...
loosingText 释放过程文案 String 释放即可刷新...
loadingText 加载过程文案 String 加载中...
disabled 是否禁用下拉刷新 Boolean false

Event

名称 说明 回调参数
refresh 下拉刷新时触发，在refresh事件一定要执行done()，才能去除loading状态，用于下拉后等待请求 { done: done }

类型：视图组件

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

名称 说明 类型 默认值
dialog.isShow 是否可见 Boolean false
dialog.closeBtnPosition 关闭按钮位置，'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right' Function ‘bottom’

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

名称 说明 类型 默认值
intervals 上下滚动的间隔时间，不包括左右滚动，ms为单位 Number 3000
duration 上下动画过渡时间，ms为单位 Number 500
textStyle 文本内容样式 Object -
boxStyle 外框内容样式 Object -
dataList 数据 Array -
dataList[index].tag tag配置，demo: {title: 'tag文本',borderColor: '#20aadf',color: '#20aadf'} Object -
isShowClose 是否显示关闭按钮 Boolean false
isNeedHorizontal 是否需要先横向滚动文字，滚动完毕纵向滚动 Boolean true
slideSpeed 横向移动的速度 像素/s Number 50

Event

名称 说明 回调参数
click 点击每一条公告触发 选中列表项
close 关闭时触发 无

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>
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: []
    }
  },
  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)
    }
  }
}

Prop

名称 说明 类型 默认值
slots slot 对象数组或数组数组 Array -
value 用来绑定sync或v-model Array -
lineHeight line-height String 34px
fontSize font-size String 16px

Prop -> slots

slots数组对象得情况下

名称 说明 类型 默认值
values slot 的值对象数组或数组数组 Array -
defaultIndex 默认选中 Number 0
content values是对象数组时，作为内容展示的key String name

Event

名称 说明 回调函数
change 滚动停止的时候，并且值发生变化 values(数组)

类型：通用函数

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()
}

About

移动端Vue组件库

Resources

Readme
Activity

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • Vue 66.7%
  • JavaScript 28.0%
  • CSS 4.6%
  • HTML 0.7%