Newlyweds Proposing Marriage
    Wondering what’s next for npm?Check out our public roadmap! »

    hstui-vue

    1.0.0 • Public • Published

    Kiko

    一个基于vue2.0的弹窗组件(PC)

    Installation

    You can install it via NPM.

      npm i kiko-rascalhao -S
    
      import Kiko from 'kiko-rascalhao'
    
      Vue.use(Kiko)
    

    Usage

    Message

    Message为一个消息提示框,默认3秒钟消失

    Parameter Type Description
    message string 提示内容
    time number 消失时间

    eg:

        this.$kiko_message('这是一个message')
        若想改变消失时间
        this.$kiko_message({
          message: '这是一个message',
          time: 3000
        })
    

    ToolTip

    可以自定义事件来触发toolTip,没有选择通过固化在页面中的方式来引入toolTip,因为考虑到可能在页面中的任何地方引入toolTip,如果固化了,将会大大限制toolTip的使用场景。所以采用了一个绑定到Vue.prototype的this.$kiko_tooltip全局方法来触发,这样就可以自定义触发方式,只需要通过传入$event就可以自动地定位任何有需要的元素了。kiko会根据当前触发元素的位置自动定位,会检测先前是否渲染过toolTip,若渲染过会自动注销。kiko_tooltip默认为在右侧。可以在初始化时,传入方向、背景色、字体颜色,若未传,则使用默认值。

    Parameter Type Description
    content string 提示内容
    direction string toolTip显示的方向(top、right、bottom、left)
    bacground string 背景色
    color string 字体颜色
    time number 消失时间

    eg:

        this.$kiko_tooltip($event, {
            content: '这是一个toolTip',
            direction: 'top',
            background: '#13CE66',
            color: '#fff',
            time: 3000
          })
    

    confirm

    confirm在保留页面的情况下会弹出一个对话框,适合一些场景更大的情况。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过title属性来显示任意标题,通过width属性来修改显示区域的宽度。

    Parameter Type Description
    visible Boolean 是否显示弹窗,支持 .sync 修饰符
    close-visible Boolean 是否显示关闭按钮
    width String 弹窗的宽度

    eg:

      <kiko-confirm width="500px" title="信息" :visible.sync="confirmVisible" :close-visible="true">
        <h1>谁的青春不迷茫</h1>
        <div class="kiko-footer" slot="footer">
          <a href="javascript:void(0)" class="kiko-btn make-sure" @click="confirmMakeSure">确定</a>
          <a href="javascript:void(0)" class="kiko-btn cancel" @click="confirmVisible = false">取消</a>
        </div>
      </kiko-confirm>
    

    Loading

    考虑到可能不需要整屏渲染,只需要局部加载loading,在指定的位置可以按需通过指令v-kiko-loading来实现,kiko会根据需要的元素位置、区域大小自动定位;若想整屏渲染,则只需通过.fullscreen修饰符,这样就可以整屏渲染loading。

    Parameter Type Description
    v-kiko-loading Boolean 指令
    fullscreen Boolean v-kiko-loading的修饰符

    eg:

        <!--全屏-->
        <p v-kiko-loading.fullscreen="loadingFullscreen">
          <button class="btn btn-info"style="position: relative" @click="loadingFullscreen = !loadingFullscreen">loadingFullscreen</button>
        </p>
    
        <!--指定位置按需渲染-->
        <p>
          <button class="btn btn-info"style="position: relative" @click="loading = !loading">loading</button>
        </p>
        <p v-kiko-loading="loading" style="position: relative">
          <pre>
            假如爱情可以解释
            誓言可以修改
            假如
            你我的相遇 可以重新安排
            那么 生活就会比较容易
            假如
            有一天 我终于能将你忘记
            然而 这不是 随便传说的故事
            也不是明天才要 上演的戏剧
            我无法找出原稿
            然后将你 将你一笔抹去
          </pre>
        </p>
    
        export default {
          data () {
            return {
              loading: false,
              loadingFullscreen: false
            }
          }
        }
    

    Install

    npm i hstui-vue

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    886 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar