vue mint-ui 使用介绍

最新推荐文章于 2024-05-13 17:52:00 发布
最新推荐文章于 2024-05-13 17:52:00 发布
阅读量7.3k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FarmerXiaoYi/article/details/82384209
版权

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件库 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。

 

  1. <!DOCTYPE html><html><head>

  2. <meta charset="UTF-8">

  3. <!-- 引入样式 -->

  4. <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>

  5. <div id="app">

  6. <mt-button @click.native="handleClick">按钮</mt-button>

  7. </div></body>

  8. <!-- 先引入 Vue -->

  9. <script src="https://unpkg.com/vue/dist/vue.js"></script>

  10. <!-- 引入组件库 -->

  11. <script src="https://unpkg.com/mint-ui/lib/index.js"></script>

  12. <script>

  13. new Vue({

  14. el: '#app',

  15. methods: {

  16. handleClick: function() {

  17. this.$toast('Hello world!')

  18. }

  19. }

  20. })

  21. </script></html>

如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。

 

关于事件绑定

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

 

但是对于其他组件，还是需要添加 .native 修饰符。

 

快速上手

本节将介绍如何在项目中使用 Mint UI。

使用 vue-cli

 

  1. npm install -g vue-cli

  2.  

  3. vue init webpack projectname

引入 Mint UI

你可以引入整个 Mint UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

完整引入

在 main.js 中写入以下内容：

 

  1. import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'

  2.  

  3. Vue.use(MintUI)

  4.  

  5. new Vue({

  6. el: '#app',

  7. components: { App }

  8. })

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

 

  1. {

  2. "presets": [

  3. ["es2015", { "modules": false }]

  4. ],

  5. "plugins": [["component", [

  6. {

  7. "libraryName": "mint-ui",

  8. "style": true

  9. }

  10. ]]]

  11. }

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

 

  1. import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'

  2.  

  3. Vue.component(Button.name, Button)

  4. Vue.component(Cell.name, Cell)

  5. /* 或写为

  6. * Vue.use(Button)

  7. * Vue.use(Cell)

  8. */

  9.  

  10. new Vue({

  11. el: '#app',

  12. components: { App }

  13. })

开始使用

至此，一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

npm run dev

编译：

npm run build

各个组件的使用方法请参阅它们各自的文档。

Toast

简短的消息提示框，支持自定义位置、持续时间和样式。

引入

import { Toast } from 'mint-ui';

例子

基本用法

Toast('提示信息');

在调用 Toast 时传入一个对象即可配置更多选项

 

  1. Toast({

  2. message: '提示',

  3. position: 'bottom',

  4. duration: 5000

  5. });

若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast（图标需自行准备）

 

  1. Toast({

  2. message: '操作成功',

  3. iconClass: 'icon icon-success'

  4. });

执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast

 

  1. let instance = Toast('提示信息');

  2. setTimeout(() => {

  3. instance.close();

  4. }, 2000);

API

 

参数 说明 类型 可选值 默认值
message 文本内容 String    
position Toast 的位置 String 'top'
'bottom'
'middle'		 'middle'
duration 持续时间（毫秒），若为 -1 则不会自动关闭 Number   3000
className Toast 的类名。可以为其添加样式 String    
iconClass icon 图标的类名 String

下拉/上拉刷新，支持自定义 HTML 模板。

引入

 

  1. import { Loadmore } from 'mint-ui';

  2.  

  3. Vue.component(Loadmore.name, Loadmore);

例子

 

  1. <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">

  2. <ul>

  3. <li v-for="item in list">{ { item }}</li>

  4. </ul></mt-loadmore>

以列表顶部的下拉刷新为例：按住列表，下拉一定距离（通过 topDistance 配置）后释放，被指定为 top-method 的方法就会执行

 

  1. loadTop() {

  2. ...// 加载更多数据

  3. this.$refs.loadmore.onTopLoaded();

  4. }

注意在这个方法的最后需要手动调用 loadmore 的 onTopLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

列表底部的上拉刷新与之类似

 

  1. loadBottom() {

  2. ...// 加载更多数据

  3. this.allLoaded = true;// 若数据已全部获取完毕

  4. this.$refs.loadmore.onBottomLoaded();

  5. }

唯一的区别是，当底部数据全部获取完毕时，可以将绑定到组件 bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。

手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 distance-index 参数配置，默认值为 2。

自定义 HTML 模板

可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板

 

  1. <template>

  2. <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">

  3. <ul>

  4. <li v-for="item in list">{ { item }}</li>

  5. </ul>

  6. <div slot="top" class="mint-loadmore-top">

  7. <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>

  8. <span v-show="topStatus === 'loading'">Loading...</span>

  9. </div>

  10. </mt-loadmore></template><script>

  11. export default {

  12. data() {

  13. return {

  14. topStatus: '',

  15. // ...

  16. };

  17. },

  18. methods: {

  19. handleTopChange(status) {

  20. this.topStatus = status;

  21. },

  22. // ...

  23. },

  24. // ...

  25. };

  26. </script>

比如需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 slot 属性为 top，类名为 mint-loadmore-top。当用户滑动组件时，组件会有以下几个状态：

  • pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置
  • drop：按下的距离不小于 topDistance，此时释放会触发 top-method
  • loading：组件已被释放，top-method 正在执行 每当组件的状态发生变化时，loadmore 都会触发 top-status-change 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 handleTopChange 方法来处理组件状态的变化。

配置加载提示区域的文字

在不使用自定义 HTML 模板的情况下，可以配置 loadmore 本身自带的加载提示区域的文字。以列表顶部为例，对应于 status 的三个状态，可配置的属性依次为 topPullText、topDropText 和 topLoadingText。与之对应的底部属性为 bottomPullText、bottomDropText 和 bottomLoadingText。

自动检测

loadmore 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 bottom-method，直到撑满容器为止。如果不希望使用这一机制，可以将 auto-fill 设为 false。

API

参数 说明 类型 可选值 默认值
autoFill 若为真，loadmore 会自动检测并撑满其容器 Boolean   true
distanceIndex 手指移动与组件移动距离的比值 Number   2
maxDistance 组件可移动的最大距离（像素），若为 0 则不限制 Number   0
topPullText topStatus 为 pull 时加载提示区域的文字 String   '下拉刷新'
topDropText topStatus 为 drop 时加载提示区域的文字 String   '释放更新'
topLoadingText topStatus 为 loading 时加载提示区域的文字 String   '加载中...'
topDistance 触发 topMethod 的下拉距离阈值（像素） Number   70
topMethod 下拉刷新执行的方法 Function    
bottomPullText bottomStatus 为 pull 时加载提示区域的文字 String   '上拉刷新'
bottomDropText bottomStatus 为 drop 时加载提示区域的文字 String   '释放更新'
bottomLoadingText bottomStatus 为 loading 时加载提示区域的文字 String   '加载中...'
bottomDistance 触发 bottomMethod 的上拉距离阈值（像素） Number   70
bottomMethod 上拉刷新执行的方法 Function    
bottomAllLoaded 若为真，则 bottomMethod 不会被再次触发 Boolean   false

Events

事件名称 说明 回调参数
top-status-change 组件顶部状态发生变化时的回调函数 组件顶部的新状态名
bottom-status-change 组件底部状态发生变化时的回调函数 组件底部的新状态名

Slot

name 描述
- 数据列表
top 自定义顶部加载提示区域 HTML 模板
bottom 自定义底部加载提示区域 HTML 模板

 

Infinite scroll

无限滚动指令。

引入

 

  1. import { InfiniteScroll } from 'mint-ui';

  2.  

  3. Vue.use(InfiniteScroll);

例子

为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 infinite-scroll-distance 设置）时，绑定到 v-infinite-scroll 指令的方法就会被触发。

 

  1. <ul

  2. v-infinite-scroll="loadMore"

  3. infinite-scroll-disabled="loading"

  4. infinite-scroll-distance="10">

  5. <li v-for="item in list">{ { item }}</li></ul>

 

  1. loadMore() {

  2. this.loading = true;

  3. setTimeout(() => {

  4. let last = this.list[this.list.length - 1];

  5. for (let i = 1; i <= 10; i++) {

  6. this.list.push(last + i);

  7. }

  8. this.loading = false;

  9. }, 2500);

  10. }

API

参数 说明 类型 可选值 默认值
infinite-scroll-disabled 若为真，则无限滚动不会被触发 Boolean   false
infinite-scroll-distance 触发加载方法的滚动距离阈值（像素） Number   0
infinite-scroll-immediate-check 若为真，则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。 Boolean   true
infinite-scroll-listen-for-event 一个 event，被执行时会立即检查是否需要执行加载方法。 Function  

 

Message box

弹出式提示框，有多种交互形式。

引入

import { MessageBox } from 'mint-ui';

例子

以标题与内容字符串为参数进行调用

MessageBox('提示', '操作成功');

或者传入一个对象

 

  1. MessageBox({

  2. title: '提示',

  3. message: '确定执行此操作?',

  4. showCancelButton: true

  5. });

此外，MessageBox 还提供了 alert、confirm 和 prompt 三个方法，它们都返回一个 Promise

MessageBox.alert(message, title);

 

  1. MessageBox.alert('操作成功').then(action => {

  2. ...

  3. });

MessageBox.confirm(message, title);

 

  1. MessageBox.confirm('确定执行此操作?').then(action => {

  2. ...

  3. });

MessageBox.prompt(message, title);

 

  1. MessageBox.prompt('请输入姓名').then(({ value, action }) => {

  2. ...

  3. });

在 prompt 中，若用户点击了取消按钮，则 Promise 的状态会变为 rejected

API

参数 说明 类型 可选值 默认值
title 提示框的标题 String    
message 提示框的内容 String    
showConfirmButton 是否显示确认按钮 Boolean   true
showCancelButton 是否显示取消按钮 Boolean   false
confirmButtonText 确认按钮的文本 String    
confirmButtonHighlight 是否将确认按钮的文本加粗显示 Boolean   false
confirmButtonClass 确认按钮的类名 String    
cancelButtonText 取消按钮的文本 String    
cancelButtonHighlight 是否将取消按钮的文本加粗显示 Boolean   false
cancelButtonClass 取消按钮的类名 String    
closeOnClickModal 是否在点击遮罩时关闭提示光 Boolean true (alert 为 false)  
showInput 是否显示一个输入框 Boolean   false
inputType 输入框的类型 String   'text'
inputValue 输入框的值 String    
inputPlaceholder 输入框的占位符 String  

Action sheet

操作表，从屏幕下方移入。

引入

 

  1. import { Actionsheet } from 'mint-ui';

  2.  

  3. Vue.component(Actionsheet.name, Actionsheet);

例子

actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 actionsheet 的显示与隐藏。

 

  1. <mt-actionsheet

  2. :actions="actions"

  3. v-model="sheetVisible"></mt-actionsheet>

API

参数 说明 类型 可选值 默认值
actions 菜单项数组 Array    
cancelText 取消按钮的文本。若设为空字符串，则不显示取消按钮 String   '取消'
closeOnClickModal 是否可以通过点击 modal 层来关闭 actionsheet Boolean   true

Popup

弹出框，可自定义内容。

引入

 

  1. import { Popup } from 'mint-ui';

  2.  

  3. Vue.component(Popup.name, Popup);

例子

position 属性指定了 popup 的位置。比如，position 为 'bottom' 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 popup 的显示与隐藏。

 

  1. <mt-popup

  2. v-model="popupVisible"

  3. position="bottom">

  4. ...

  5. </mt-popup>

若省略 position 属性，则 popup 会相对于屏幕居中显示（若不想让其居中，可通过 CSS 对其重新定位）。此时建议将动效设置为 popup-fade，这样在显示/隐藏时会有淡入/淡出效果。

 

  1. <mt-popup

  2. v-model="popupVisible"

  3. popup-transition="popup-fade">

  4. ...

  5. </mt-popup>

API

参数 说明 类型 可选值 默认值
position popup 的位置。省略则居中显示 String 'top'
'right'
'bottom'
'left'		  
pop-transition 显示/隐藏时的动效，仅在省略 position 时可配置 String 'popup-fade'  
modal 是否创建一个 modal 层 Boolean   true
closeOnClickModal 是否可以通过点击 modal 层来关闭 popup Boolean   true

Slot

name 描述
- 弹出框的内容

Swipe

轮播图，可自定义轮播时间间隔、动画时长等。

引入

 

  1. import { Swipe, SwipeItem } from 'mint-ui';

  2.  

  3. Vue.component(Swipe.name, Swipe);

  4. Vue.component(SwipeItem.name, SwipeItem);

例子

基础用法

 

  1. <mt-swipe :auto="4000">

  2. <mt-swipe-item>1</mt-swipe-item>

  3. <mt-swipe-item>2</mt-swipe-item>

  4. <mt-swipe-item>3</mt-swipe-item></mt-swipe>

隐藏 indicators

 

  1. <mt-swipe :show-indicators="false">

  2. <mt-swipe-item>1</mt-swipe-item>

  3. <mt-swipe-item>2</mt-swipe-item>

  4. <mt-swipe-item>3</mt-swipe-item></mt-swipe>

取消自动播放

 

  1. <mt-swipe :auto="0">

  2. <mt-swipe-item>1</mt-swipe-item>

  3. <mt-swipe-item>2</mt-swipe-item>

  4. <mt-swipe-item>3</mt-swipe-item></mt-swipe>

change 事件

轮播图切换时会触发 change 事件，参数为切入轮播图的索引

 

  1. <mt-swipe @change="handleChange">

  2. <mt-swipe-item>1</mt-swipe-item>

  3. <mt-swipe-item>2</mt-swipe-item>

  4. <mt-swipe-item>3</mt-swipe-item></mt-swipe>

 

  1. methods: {

  2. handleChange(index) {

  3. ...

  4. }

  5. }

API

参数 说明 类型 可选值 默认值
speed 动画持时（毫秒） Number   300
auto 自动播放的时间间隔（毫秒） Number   3000
defaultIndex 初始显示的轮播图的索引 Number   0
continuous 是否可以循环播放 Boolean   true
showIndicators 是否显示 indicators Boolean   true
prevent 是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能 Boolean   false
stopPropagation 是否在 touchstart 事件触发时阻止冒泡。 Boolean   false

Slot

mt-swipe

name 描述
- 一个或多个 mt-swipe-item 组件

mt-swipe-item

name 描述
- 单个轮播图的内容

Lazy load

图片懒加载指令。

引入

 

  1. import { Lazyload } from 'mint-ui';

  2.  

  3. Vue.use(Lazyload);

例子

为 img 元素添加 v-lazy 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。

 

  1. <ul>

  2. <li v-for="item in list">

  3. <img v-lazy="item">

  4. </li></ul>

image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指

 

<div id="container">

  <ul>

    <li v-for="item in list">

      <img v-lazy.container="item">

    </li>

  </ul></div>

 

 

Range

滑块，支持自定义步长、区间等。

引入

 

  1. import { Range } from 'mint-ui';

  2.  

  3. Vue.component(Range.name, Range);

例子

将一个本地变量与 range 的 value 属性同步即可实现双向绑定

<mt-range v-model="rangeValue"></mt-range>

更多的配置项

 

  1. <mt-range

  2. v-model="rangeValue"

  3. :min="10"

  4. :max="90"

  5. :step="10"

  6. :bar-height="5"></mt-range>

可在滑块两侧显示文字

 

  1. <mt-range v-model="rangeValue">

  2. <div slot="start">0</div>

  3. <div slot="end">100</div></mt-range>

API

参数 说明 类型 可选值 默认值
value 滑块的值 Number    
min 最小值 Number   0
max 最大值 Number   100
step 步长 Number   1
disabled 是否禁用 Boolean   false
barHeight 滑槽的线宽（像素） Number   1

Slot

name 描述
start 滑块左侧 DOM
end 滑块右侧 DOM

Progress

进度条。

引入

 

  1. import { Progress } from 'mint-ui';

  2.  

  3. Vue.component(Progress.name, Progress);

例子

传入 value 作为进度条的值。可自定义它的线宽

<mt-progress :value="20" :bar-height="5"></mt-progress>

可在进度条两侧显示文字

 

  1. <mt-progress :value="60">

  2. <div slot="start">0%</div>

  3. <div slot="end">100%</div></mt-progress>

API

参数 说明 类型 可选值 默认值
value 进度条的值（%） Number    
barHeight 进度条的线宽（像素） Number   1

Slot

name 描述
start 进度条左侧 DOM
end 进度条右侧 DOM

Picker

选择器，支持多 slot 联动。

引入

 

  1. import { Picker } from 'mint-ui';

最低0.47元/天 解锁文章
那些年少的伤寂静微凉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue学习22----Mint UI(手机端框架)的使用，实现Toast，ActionSheet等
翟浩浩Android专栏
04-08 831
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 MintUi 基于vue 移动端的ui框架 官网： http://mint-ui.github.io/#!/zh-cn github上面下载源码 https://github.com/ElemeFE/mint-ui 找到example----pages----各种组件的例子 使用步骤： 1.找官网 http://m...
mint-ui（基于 Vue.js 的移动端组件库）
肖的博客
10-25 8824
1.引入文件 引入全部组件 import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' Vue.use(MintUI) new Vue({ el: '#app', components: { App } }) 按需引入部分组件...
elementui中close-on-click-modal=“fasle“不生效
最新发布
qq_33298964的博客
05-13 331
以上两种方式都不生效，如下将 :closeOnOlickOodal='false' 动态绑定才会生效。
vue中全局定义mintUI中toast
weixin_43837268的博客
09-12 1238
1.main.js //全局引用Toast import { Toast } from "mint-ui"; Vue.prototype.$toast = Toast 2.use.vue this.$toast({ message: "邮箱已拷贝", position: "ce...
mint-ui使用
田兴的博客
03-25 872
mint-ui 的使用 mint-ui官网 安装 npm install mint-ui -S 引入项目 全局引入（简单粗暴，一次引入所有组件） main.js // 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; import 'mint-ui/lib/style.css'; // 有可能会报错， 找node_m...
vue学习十：基于 Vue.js 的移动端组件库Mint-UI的学习
zerobaek的博客
04-11 273
Mint-UI官方文档 安装： # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 在main.js导入所有的 MIntUI 组件： // 导入 Mint-UI import MintUI from 'mint-ui' //把所有的组件都导入进来 // 这里 可以省略 node_modules 这一层目...
vue mint-ui tabbar变组件使用
08-27
下面将详细介绍 Vue Mint-UI Tabbar 组件的使用方法和实例代码。 什么是 Vue Mint-UI Tabbar 组件？ Vue Mint-UI Tabbar 组件是基于 Vue.js 和 Mint-UI 框架的导航栏组件，提供了灵活的配置选项和简洁的 API，方便...
vue mint-ui学习笔记之picker的使用
12-28
本文介绍了vue mint-ui picker的使用，分享给大家，也给自己留个学习笔记 Picker的使用 import { Picker } from 'mint-ui'; Vue.component(Picker.name, Picker); API 示例一：picker的简单使用 xxx.vue： ...
vue.js中mint-ui框架的使用方法
10-19
主要为大家详细介绍了vue.js中使用mint-ui框架的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue修改mint-ui默认样式的方法
08-28
Vue修改mint-ui默认样式的方法总结 在使用 Vue 框架开发时，选择合适的 UI 组件库是非常重要的。Mint-UI 是一个流行的移动端 UI 组件库，提供了多种实用的 UI 组件。然而，在使用 Mint-UI 时，我们可能需要修改其...
Vue外卖十二：mint-ui安装+配置+使用、mint-ui退出登录按钮+退出功能+确认弹窗组件、
*
12-01 405
一、使用 mint-ui 1) 主页: 文档：https://www.w3cschool.cn/mintui/ 官方：http://mint-ui.github.io/#!/zh-cn 2) 安装:cnpm install --save mint-ui 3) 实现按需打包 1. 下载 cnpm install --save-dev babel-plugin-component 2. 修改 babel 配置打开文件 .bablerc 加入如下代码 "plugins": ["transform-runtime
mint-ui 弹出层popup在ios下嵌套层里无法遮盖全屏终极解决方案
qq_27822743的博客
09-26 1772
将popup放在能覆盖全屏的dom之下
Vue中Toast最简单的方式！
weixin_43332684的博客
07-22 1896
使用过Mint-ui组件库的小伙伴都应该知道Toast这个玩意。小编刚刚用的时候，觉得一切的逻辑都是十分完美，但是就是不出来。下面看看具体的使用步骤 1.安装并引入mint-ui ① 安装方式 npm i mint-ui -S ② 引入方式 引入的方式主要有两种，一种是全局引入，一种是按需引入。一般推荐按需引入。因为全局引入时会引入很多不必要的代码，使性能降低。 import { Toast } from 'mint-ui'; Vue.use(Toast) 2.引入Toast 尽管在前面的main.js
Mint UI教程
u011581852的博客
04-06 517
Mint UI教程1 介绍2 npm 安装3 CDN4 导入方式5 基本使用5 按需引入 1 介绍 Mint UI基于 Vue.js 的移动端组件库. 本章节介绍的是基于webpack的开发方式 2 npm 安装 npm i mint-ui -D 3 CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unp
elememt ui 组件 dialog使用备忘
dingwen
08-15 203
文章目录1. 多层嵌套dialog遮罩1.1 描述1.2 解决（子dialog中）2. 鼠标移除dialog点击不关闭 1. 多层嵌套dialog遮罩 1.1 描述 当有多层dialog嵌套时，弹出新层dialog会出现灰色遮罩的问题。 1.2 解决（子dialog中） <el-dialog append-to-body> 　　<div>内容</div> </el-dialog> 2. 鼠标移除dialog点击不关闭 <el-dialog :vi
基于mint-ui的移动应用开发案例四（应用中心）
weixin_30378311的博客
11-30 566
本节主要包括以下内容：应用中心界面的布局mt-swipe，loadmore，mt-cell，mt-actionsheet等组件的使用echarts的使用1.应用中心界面的布局页面的大体结构是一个头标题，走马灯的图片展示区域，和下面的子应用的icon展示。<template> <div id="tool"> <!--头部--...
mint-ui 在vue中使用 按钮
小羽向前跑
02-07 2662
最终效果： 引入mint-ui后 见上篇 buttonmint.vue全部内容： &lt;template&gt; &lt;div&gt; &lt;h1 class="page-title"&gt;按钮&lt;/h1&gt; &lt;mt-button @click.native="handleClick"&gt;按钮&lt;/mt-button&a
在Mint-UI中的MessageBox.alert，如何修改样式，并使用模板字符串解决动态传值
qq_26780317的博客
08-27 1392
背景：我们在项目中使用Mint-UI时，可以使用里面的组件，但有时需要对组件进行修改或者自定义，或者动态传值，此时就需要使用模板字符串了。 一、如何使用模板字符串进行自定义样式修改 var htmls = ` <div class="box"> <div class="isunbind" style="text-align:left;">可用于购买本产品的医保个人账户额度为${this.lnzhyeMoney}元，您的医保可用额度不足以全额抵扣保费，需.
ElementUI（全局｜局部）禁止点击遮罩层关闭el-dialog弹窗
qq_44711316的博客
10-26 2491
第一种：全局禁止点击遮罩层关闭el-dialog弹窗 在main.js里面： import ElementUI from 'element-ui'; ElementUI.Dialog.props.closeOnClickModal.default = false 第二种：局部 单独给某个dialog设置禁止点击遮罩层关闭el-dialog弹窗 <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" :
vue工程项目mint-ui的house图标
06-03
Vue.use(MintUI) ``` 2. 在需要使用 house 图标的组件中，使用 Mint UI 的 `mt-icon` 组件，并将图标名称设为 `house`： ``` <mt-icon name="house"></mt-icon> ``` 这样就可以在页面上显示出 house 图标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

那些年少的伤寂静微凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值