一个基于vue2.0的弹窗组件(PC)
npm i kiko-rascalhao -S
import Kiko from 'kiko-rascalhao'
Vue.use(Kiko)
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的使用场景。所以采用了一个绑定到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在保留页面的情况下会弹出一个对话框，适合一些场景更大的情况。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过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="javscript:void(0)" class="kiko-btn make-sure" @click="confirmMakeSure">确定</a>
<a href="javscript:void(0)" class="kiko-btn cancel" @click="confirmVisible = false">取消</a>
</div>
</kiko-confirm>
考虑到可能不需要整屏渲染,只需要局部加载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
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent