在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):lin-xin/vue-toast开源软件地址(OpenSource Url):https://github.com/lin-xin/vue-toast开源编程语言(OpenSource Language):CSS 55.3%开源软件介绍(OpenSource Introduction):vue2-toastA mobile toast plugin for vue2. 中文文档 UsageInstall:
Import: import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast); or import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast, {
type: 'center',
duration: 3000,
wordWrap: true,
width: '150px'
}); Use in component: <template>
<div id="app">
<button @click="openTop()">top</button>
<button @click="openCenter()">center</button>
<button @click="openBottom()">bottom</button>
<button @click="openLoading()">loading</button>
</div>
</template>
export default {
methods:{
openTop(){
this.$toast.top('top');
},
openCenter(){
this.$toast.center('center');
},
openBottom(){
this.$toast('bottom'); // or this.$toast.bottom('bottom');
},
openLoading(){
this.$loading('loading...');
let self = this;
setTimeout(function () {
self.closeLoading()
}, 2000)
},
closeLoading(){
this.$loading.close();
}
}
} work in Nuxt.jsconfig it in nuxt.config.js build: {
vendor: ['vue2-toast'],
extend (config, ctx) {
if (ctx.isClient) {
config.resolve.alias['vue'] = 'vue/dist/vue.js';
}
}
} options
source codedownload in Github. demo |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论