1.3.21 • Published 1 year ago
xing-ui-mobile-v3 v1.3.21
xing-ui-mobile-v3
组件安装
npm install xing-ui-mobile-v3
引入方式:
在入口文件中:
import xing from 'xing-ui-mobile-v3'
import 'xing-ui-mobile-v3/xing-ui.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(xing);
xing-calendar (----日历组件----)
使用方式:
<template>
<div>
<xing-calendar multiple :animation="false" :date="['2022-10-14']" @change="onChange"></xing-calendar>
</div>
</template>
<script setup>
const onChange = (e) => {
console.log(e);
}
</script>
props:
multiple (是否多选,默认false)
animation (切换日期偏移动画,默认true)
date (勾选日期,仅支持数组Array类型,且值必须是yyyy-MM-DD格式。默认拿第一项作为展示页。如果不传任何值则显示当前时间日期)
event:
@change (所选中的日期)
xing-notification (----通知组件----)
使用方式:
this.$xingNotice({
tipsTitle: '警告', //标题
tipsContent: '电量不足10%', //内容
notificationType: 'warning', //风格。分别有error、success、warning、news、prompt
notificationDelay: 2000 //持续显示时长
})
如果在setup中调用,因为没有this, 可以直接这样写(其他有this情况也是可以的哦):
$xingNotice({
tipsTitle: '警告', //标题
tipsContent: '电量不足10%', //内容
notificationType: 'warning', //风格。分别有error、success、warning、news、prompt
notificationDelay: 2000 //持续显示时长
})
提示:
标题已做长度处理,传入大于5个单位的标题只显示前5个单位标题。
内容已做长度处理,传入大于10个单位的内容只显示前10个单位内容。
xing-division (----分割线组件----)
使用方式:
<xing-division position="top" />
props: position (分割线所在位置,仅支持 top、bottom,默认值:bottom)
xingProgress (----进度条组件----)
使用方式:
<xing-progress
type="circle"
v-model="progress"
:size="60"
:strokeWidth="6"
strokeBgColor="red"
strokeColor="blue"
>
<template #circle>
<div style="font-size: 12px;">
进度:{{ progress }}
</div>
</template>
</xing-progress>
<script setup>
import { ref } from 'vue';
const progress = ref(0)
</script>
props:
v-model: 进度条百分比
type: 进度条类型(默认bar,可选circle。bar是条状,circle是环形的)
size: 环形进度条大小
strokeWidth: 环形进度条弧形宽度
strokeBgColor:未覆盖的颜色
strokeColor: 进度条颜色
slot:
circle (具名插槽)
环形进度条中间内容。不传入内容默认显示百分比。
xing-wave (----水波纹组件----)
点击的地方展开水纹效果。
使用方式:
<xing-wave :rippleBgColor="rippleColor"></xing-wave>
或者
<xing-wave v-model="rippleColor"></xing-wave>
...
data() {
return: {
rippleColor: 'blue'
}
}
props:
rippleBgColor (水波纹颜色)
slot:
内容,如:
<xing-wave :rippleBgColor="rippleColor">
<xing-image src="../food.png"></xing-image>
</xing-wave>
此时点击图片就具有波纹动画效果了,也可以放入按钮等。
推荐使用v-model绑定波纹颜色。
xing-button (----按钮组件----)
该组件风格暂时没有定义很多种类,如果需要其他的样式,需要开发者自己去定义,后续我将会更新此组件。
使用方式:
<xing-button :isShowRipple="false" rippleColor="blue" @click="clickBtn">点击</xing-button>
proos:
rippleColor (点击波纹颜色)
isShowRipple (点击效果是否采用波纹效果,默认true)
event:
@click (点击事件)
slot:
按钮中间显示内容
因为子组件未暴露emit事件,所以这里的props不能使用v-model进行绑定。
xing-popup (----自定义弹窗组件----)
使用方式:
<xing-popup popupTitle="请选择时间" bottomTitle="关闭" v-model="isShowPopup">
<template v-slot:headerLeft>
<div @click="isShowPopup = false">取消</div>
</template>
<template v-slot:headerRight>确定</template>
</xing-popup>
或者:
<xing-popup popupTitle="请选择时间" bottomTitle="关闭" v-model="isShowPopup">
<template #headerLeft>
<div @click="isShowPopup = false">取消</div>
</template>
<template #headerRight>确定</template>
</xing-popup>
props: popupTitle (弹窗头部标题)
showBottomBtn (是否显示底部按钮, 默认true)
clickMaskClosePopup (是否开启点击遮罩层关闭弹窗,默认true)
bottomTitle (底部按钮显示的文字,默认确定)
slot:headerLeft(具名插槽,弹窗头部左侧)
headerRight (具名插槽,弹窗头部右侧侧)
v-model: 控制组件显示隐藏
提醒:
vue3 中:具名插槽只能用在template中,#slotName 是简写,也可写v-slot
xing-input (----输入框组件----)
使用方式:
<xing-input ref="xingInput" type="password" inputmode="numeric" :focus="false" placeholder="密码" v-model="value"></xing-input>
props:
type (输入框类型,默认text)
placeholder (提示文本)
inputmode (唤起什么类型的键盘)
focus (首次渲染是否自动聚焦)
event:
@focus (触焦事件)
@blur (失去焦点事件)
ref:
可通过ref调用子组件的focus、blur方法,触发聚焦、失焦方法。
提示:***
inputmode可选值:text、none、decimal、numeric、tel、search、email、url
text: 默认值,会显示标准输入键盘
none: 不使用虚拟键盘,这个时候页面需要使用自定义的键盘代替(后续我也会提供一个自定义键盘组件,如果不满意可以自己封装)
decimal: 小数表示键盘,除了数字之外可能会有小数点 . 或者千分符逗号 ,。
numeric: 显示0-9的数字键盘。
tel: 手机数字键盘,会有星号 * 或者井号 # 键。
search: 提交按钮会显示 'search' 或者 ‘搜索’。
email: 键盘上会有 @ 符号键。
url: 键盘上会有斜杠 / 符号键。
因为我手中机型较少,没有经过大量测试,苹果都挺支持。
该组件带有css动画,增强用户体验,后续会继续优化。
xing-drawer (----抽屉组件----)
使用方式:
<template>
<div>
<button @click="openDrawer = true">打开抽屉</button>
<xing-drawer position="right" v-model="openDrawer"></xing-drawer>
</div>
</template>
props:
position (抽屉从哪边展开,默认right。可选值: left、right、top、bottom。)
maxH (最大高度)
maxW (最大宽度)
v-modle: 双向绑定值,用于抽屉显示隐藏
slot:
内容插槽,可自定义抽屉中显示内容
注意: position如果传入非left、right、top、bottom值,则默认使用right。
xing-switch (----switch开关组件----)
使用方式:
<xing-switch v-model="status"></xing-switch>
v-model: status 开关状态
xing-loading (----加载框组件----)
使用方式:
显示加载框
已做dom节点控制,不用担心多次调用会叠加dom元素
this.$showXingLoading({
type: 'wave', //加载框类型,可选:wave、annularBall,默认:wave
position: 'bottom' //加载框位置,可选:top、center、bottom (这三种都是水平居中。如果传入其他位置,都会默认top),默认:top
})
隐藏加载框
this.$hideXingLoading()
如果在setup中调用,因为没有this, 可以直接这样写(其他有this情况也是可以的哦):
$showXingLoading({
type: 'wave', //加载框类型,可选:wave、annularBall,默认:wave
position: 'bottom' //加载框位置,可选:top、center、bottom (这三种都是水平居中。如果传入其他位置,都会默认top),默认:top
})
$hideXingLoading() // 在setup中这样调用
xing-keyboard (----自定义数字键盘组件----)
在移动端中,安卓和苹果唤起的手机键盘可能样式不一样,所以提供一个统一样式的数字键盘。
使用方法:
<xing-keyboard v-model="openKeyboard" @change="clickKey" :isShowTitle="true" topTitle="安全键盘">
<template v-slot="topRightBtn">
<div @click="openKeyboard = false">
完成
</div>
</template>
</xing-keyboard>
props:
isShowTitle (是否显示键盘标题,默认false)
topTitle (键盘标题文本)
v-model:
控制键盘显示和隐藏
slot(具名插槽topRightBtn):
顶部标题右侧按钮,可传入文本。不传入默认显示 '关闭' (vue3中具名插槽使用方式:v-slot或者#slot)
event:
@change (当前所点击的按键)
xing-drag-cell (----左滑操作组件----)
使用方式:
<xing-drag-cell :btnTitle="['回复', '删除']" @clickCellEvent="clickRightBtn"></xing-drag-cell>
props:
btnTitle (右侧按钮标题)
event:
@clickCellEvent (点击事件)
slot:
可以自定义滑动区域内容
提醒: 右侧按钮已做数量控制,即使传入的标题为两个以上,最大显示数量就只显示前两位按钮。
xing-collapse (----折叠面板组件----)
使用方式:
<xing-collapse title="今日任务" :isOpen="true">
<div>我是内容</div>
</xing-collapse>
props:
title (折叠面板标题)
isOpen (折叠面板是否展开,默认不展开)
slot:
内容插槽
点击头部展开、关闭。
xingFragmentation (---碎片特效组件----)
使用方式:
<xing-fragmentation>
<div style="background-color: grey; width: 200px; height: 300px;"></div>
</xing-fragmentation>
提示:
slot: 插槽
该组件具有碎片特效。可自行使用。
xingSwipe (----高性能swipe组件(可拓展成轮播图组件)----)
使用方式:
<template>
<xing-swipe :dataList="myDataList" showDots>
<template #default="{ scope }">
<div style="background: red;">
{{ scope.$index }}-
{{ scope.currentItemData }}
</div>
</template>
</xing-swipe>
</template>
<script setup>
import { ref } from "vue";
const myDataList = ref(Array.from({ length: 10 }, (_, index) => index));
</script>
提示:
props:
dataList 数据
showDots (是否展示指示点,默认false)
scope-slot:
scope (作用域插槽)
返回一个对象,$index (当前下标), currentItemData (当前绑定的数据)
xing-toast (----轻提示组件----)
使用方式:
this.$xingToast('明天不要忘记对象的生日哦~')
setup中使用:
$xingToast('明天不要忘记对象的生日哦~')
xing-pull-refresh (----下拉刷新组件----)
<template>
<xing-pull-refresh :type="type" ref="pullRefresh" @openRefresh="isOpen">
<template #icon>
<!-- 自定义动画 -->
</template>
<div>模拟请求三秒</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
<div>llllll</div>
</xing-pull-refresh>
</template>
<script setup>
import { ref } from 'vue';
let type = ref('wave')
let customBool = ref(false)
const pullRefresh = ref()
const isOpen = (bool) => {
if (bool) {
setTimeout(() => {
pullRefresh.value.closeRefresh()
}, 3000)
}
}
</script>
提示:
props:
type (加载动画类型,有wave和annularBall两种类型,如果使用自定义动画则以自定义动画为主)
emit:
openRefresh (是否完全展开下拉刷新动画部分,下拉完全展开或关闭触发)
slot:
具名插槽:icon
普通插槽:<slot></slot>
event:
closeRefresh (关闭下拉刷新动画)
xingOpenAutoScheme (----开启自适应系统暗黑模式----)
使用方式:
this.$xingOpenAutoScheme();
setup中使用:
$xingOpenAutoScheme();
xingCloseAutoScheme (----关闭自适应系统暗黑模式----)
使用方式:
this.$xingCloseAutoScheme();
setup中使用:
$xingCloseAutoScheme();
xingOpenDarkSchemeWithForce (----强制开启暗黑模式----)
使用方式:
this.$xingOpenDarkSchemeWithForce();
setup中使用:
$xingOpenDarkSchemeWithForce();
xingShowWatermark (----显示背景水印----)
使用方式:
this.$xingShowWatermark('我是水印');
setup中使用:
$xingShowWatermark('我是水印');
xingHideWatermark (----隐藏背景水印----)
使用方式:
this.$xingHideWatermark();
setup中使用:
$xingHideWatermark();
xingBase64ToBlob (----将base64转换为blob----)
使用方式:
let base64 = 'base...........x'
let blob = this.$xingBase64ToBlob(base64);
console.log(blob);
setup中使用:
$xingBase64ToBlob(base64);
xingBlobToBase64 (----将blob转换为base64----)
使用方式:
let blob = 'blob:localhost:8080/xxxxxxx'
this.$xingBlobToBase64(blob).then((res) => {
console.log(`转换之后的base64: ${res}`);
}).catch((error) => {
....
})
setup中使用:
$xingBlobToBase64(blob).then((res) => {
console.log(`转换之后的base64: ${res}`);
}).catch((error) => {
....
})
xingBlobToFile (----将blob转换为file----)
使用方式:
let base64 = 'base...........x'
let blob = this.$xingBase64ToBlob(base64); //setup中可以省略this
this.$xingBlobToFile(blob, 'xxxx文件'); //参数一:blob对象。参数二:文件名,不传入则显示xing-default-filename
setup中使用:
$xingBlobToFile(blob, 'xxxx文件');
提醒:
实际开发根据自己需求来转换。
实际开发中肯定比这个复杂,如果你只是一个图片的url,
可以使用之前提供的 url -> base64 -> blob -> file。
xingCamel2Dash (----驼峰转成短横线----)
使用方式:
this.$xingCamel2Dash('asgFlsdfEfcx'); // asg-flsdf-efcx
setup中使用:
$xingCamel2Dash('asgFlsdfEfcx'); // asg-flsdf-efcx
xingChangeCase (----字母大小写操作方法----)
使用方式:
this.$xingChangeCase('aaa', 1); // Aaa
this.$xingChangeCase('Aaa', 2); // aaa
this.$xingChangeCase('Aaa', 3); // aAA
this.$xingChangeCase('Aaa', 4); // AAA
this.$xingChangeCase('Aaa', 5); // aaa
setup中可以省略this:
$xingChangeCase('aaa', 1); // Aaa
$xingChangeCase('Aaa', 2); // aaa
$xingChangeCase('Aaa', 3); // aAA
$xingChangeCase('Aaa', 4); // AAA
$xingChangeCase('Aaa', 5); // aaa
注意:
第一个参数是需要转换的对象,第二个是转换类型;
1(首字母大写, 其他字母不变)
2(首字母小写,其他字母不变)
3(大小写转换)
4(全部大写)
5(全部小写)
其他数值或者不穿类型,都会返回自身。
xingCheckType (----常用正则校验----)
使用方式:
this.$xingCheckType('1234567', 'email'); //false
setup中使用:
$xingCheckType('1234567', 'email'); //false
注意:
第一个参数是需要校验的对象。
第二个参数是校验的类型(可选:email、phone、tel、number、english、chinese、lower、upper)
email: 邮箱
phone: 手机号码
tel: 座机号码
number: 数字
english: 英文
chinese: 中文
lower: 全部小写
upper: 全部大写
xingClickDocumentAnimation (----点击窗口展现文字动画----)
使用方式:
this.$xingClickDocumentAnimation(['富强', '民主', '文明', '和谐'])
setup中使用:
$xingClickDocumentAnimation(['富强', '民主', '文明', '和谐'])
提示:
传入的参数必须是数组。其中的内容是需要展现的数据。
xingCloseClickAnimation (----关闭点击窗口文字动画)
使用方式:
this.$xingCloseClickAnimation();
setup中使用:
$xingCloseClickAnimation();
xingCompressedImg (----压缩图片方法----)
使用方式:
let img = 'http://xxxx.com'
this.$xingCompressedImg(img, 0.8).then((res) => {
console.log(`压缩后的图片:${res}`)
})
setup中使用:
$xingCompressedImg(img, 0.8).then((res) => {
console.log(`压缩后的图片:${res}`)
})
注意:
第一个参数传入的img可以是本地图片、网络图片、也可以是base64。
第二个参数是压缩率。
压缩后的图片以base64格式返回。
xingCopyText (----复制文本----)
使用方式:
this.$xingCopyText('我是复制文本');
this.$xingCopyText(''); // ''
this.$xingCopyText(); //undefined
setup中使用:
$xingCopyText('我是复制文本');
$xingCopyText(''); // ''
$xingCopyText(); //undefined
xingCountStr (----获取字符串中每一个字符出现的次数----)
使用方式:
this.$xingCountStr('sdfsdfsdfsdj地方kkfsjdlfjsdjflsdjfl');
setup中使用:
$xingCountStr('sdfsdfsdfsdj地方kkfsjdlfjsdjflsdjfl');
此时会返回: {d: 7,f: 7,j: 5,k: 2,l: 3,s: 7,地: 1,方: 1}
xingDateIsValid (----检验日期是否合法----)
使用方式:
this.$xingDateIsValid('2022-01-01') // true
setup中使用:
$xingDateIsValid('2022-01-01') // true
xingScrollTopOrBottom (----定位到页面顶部或者底部----)
使用方式:
this.$xingScrollTopOrBottom(bool, el); //
this.$xingScrollTopOrBottom(true, document.body); //返回窗口顶部
this.$xingScrollTopOrBottom(true, this.$refs.list); //返回指定元素顶部
this.$xingScrollTopOrBottom(true); //返回指定元素顶部
this.$xingScrollTopOrBottom(false); //返回底部
this.$xingScrollTopOrBottom(); //返回底部
setup中使用:
$xingScrollTopOrBottom(bool, el);
$xingScrollTopOrBottom(true, document.body); //返回窗口顶部
$xingScrollTopOrBottom(true, this.$refs.list); //返回指定
$xingScrollTopOrBottom(true); //返回指定元素顶部
$xingScrollTopOrBottom(false); //返回底部
$xingScrollTopOrBottom(); //返回底部
如果你只是想让嵌套的子页面滚动到顶部,即可这样调用:
let childrenEl = this.$refs.myScrollView; (注意:这里的myScrollView是我绑定的ref对象。实际场景需要根据你们自己的需求)
this.$xingScrollTopOrBottom.call(childrenEl); //setup中可以省略this
提示:
因为控制的是el实例,一定要确保dom元素的的确确渲染之后才能调用,否责可能报错哦~。
如果传入其他Boolean类型为false的,即统一返回底部,如:0,'', null, undefined
xingDownloadFile (----下载文件----)
使用方式:
let url = 'http://xxxxx.com';
let filename = '2022-3-2下载';
this.$xingDownloadFile(url, filename, (res) => {
console.log(`当前下载进度:${res.progress}%`);
console.log(`下载完成之后的文件blob${res.blob}%`);
});
setup中使用:
$xingDownloadFile(url, filename, (res) => {
console.log(`当前下载进度:${res.progress}%`);
console.log(`下载完成之后的文件blob${res.blob}%`);
});
提示:
url: 文件下载地址
filename: 文件下载之后,保存的文件名
第三个参数,是接收下载进度回调(返回下载进度,以及下载完成之后的blob)。
blob可用来转base64,如果是pdf文件,可以转换base64来显示...
目前只支持get请求。之后会兼容所有请求
xingEncodeUtf8 (----编码utf-8方法----)
使用方式:
this.$xingEncodeUtf8(124); // [49, 50, 52]
setup中使用:
$xingEncodeUtf8(124); // [49, 50, 52]
xingDecodeUtf8 (----utf-8解码方法----)
使用方式:
this.$xingDecodeUtf8([49, 50, 52]); //124
setup中使用:
$xingDecodeUtf8([49, 50, 52]); //124
xingGetFileBinary (----file转二进制方法----)
使用方式:
this.$xingGetFileBinary(file);
setup中使用:
$xingGetFileBinary(file);
xingGetRandomNumber (----生成范围随机数----)
使用方法:
this.$xingGetRandomNumber(100); //返回一个0 - 100的随机数
this.$xingGetRandomNumber(50); //返回一个0 - 50的随机数
this.$xingGetRandomNumber(); //不传入任何值则返回 0
setup中使用:
$xingGetRandomNumber(100); //返回一个0 - 100的随机数
$xingGetRandomNumber(50); //返回一个0 - 50的随机数
$xingGetRandomNumber(); //不传入任何值则返回 0
xingGetRandomAtoZ (----生成a-z或者A-Z之内的字母)
使用方式:
this.$xingGetRandomAtoZ(true) //如果传入true,则返回 A-Z 范围中一个字母
this.$xingGetRandomAtoZ(false) //如果传入false,则返回 a-z 范围中一个字母
this.$xingGetRandomAtoZ() //如果不传则默认返回a-z中一个字母
setup中使用:
$xingGetRandomAtoZ(true) //如果传入true,则返回 A-Z 范围中一个字母
$xingGetRandomAtoZ(false) //如果传入false,则返回 a-z 范围中一个字母
$xingGetRandomAtoZ() //如果不传则默认返回a-z中一个字母
xingGetAppSource (----判断移动端机型----)
使用方式:
this.$xingGetAppSource(); //会返回机型,返回ios或者android
setup中使用:
$xingGetAppSource(); //会返回机型,返回ios或者android
xingGetBattery (----获取手机电量信息----)
使用方式:
this.$xingGetBattery().then(res => {
console.log(res);
})
setup中使用:
$xingGetBattery().then(res => {
console.log(res);
})
注意: 该方法只对安卓手机生效!!!
注意: 该方法只对安卓手机生效!!!
注意: 该方法只对安卓手机生效!!!
提示:
会返回电池相关信息。
charging (是否正在充电)
chargingTime (还需要多久充满电)
dischargingTime (电量可用时间)
level (当前电量,0-1范围,1表示充满。)
其他充电改变事件:
onchargingchange (充电状态改变所触发事件)
onchargingtimechange (一旦充电时间改变所触发事件)
ondischargingtimechange (当用电时间变化所触发事件)
onlevelchange (电池电量发生变化所触发事件)
xingGetBoolean (----检查变量布尔类型----)
使用方法:
this.$xingGetBoolean(0); //false
this.$xingGetBoolean('0'); //true
this.$xingGetBoolean(''); //false
this.$xingGetBoolean('12'); //true
this.$xingGetBoolean(12); //true
this.$xingGetBoolean(true); //true
this.$xingGetBoolean(false); //false
this.$xingGetBoolean(NaN); //false
this.$xingGetBoolean(null); //false
this.$xingGetBoolean(undefined); //false
this.$xingGetBoolean([]); //false
this.$xingGetBoolean([[],[]]); //false
this.$xingGetBoolean([[],[1]]); //true
this.$xingGetBoolean({}); //false
setup中使用:
$xingGetBoolean(0); //false
$xingGetBoolean('0'); //true
$xingGetBoolean(''); //false
$xingGetBoolean('12'); //true
$xingGetBoolean(12); //true
$xingGetBoolean(true); //true
$xingGetBoolean(false); //false
$xingGetBoolean(NaN); //false
$xingGetBoolean(null); //false
$xingGetBoolean(undefined); //false
$xingGetBoolean([]); //false
$xingGetBoolean([[],[]]); //false
$xingGetBoolean([[],[1]]); //true
$xingGetBoolean({}); //false
xingGetChinese (----获取字符串中所有中文----)
使用方式:
this.$xingGetChinese('123121f反倒是dsfsdf是-帆帆帆帆'); //反倒是-是-帆帆帆帆
setup中使用:
$xingGetChinese('123121f反倒是dsfsdf是-帆帆帆帆'); //反倒是-是-帆帆帆帆
xingGetElementPosition (----获取dom元素位置----)
使用方式:
<div ref="content">哈哈哈</div>
let pos = this.$xingGetElementPosition(this.$refs.content);
setup中使用:
const content = ref()
let pos = $xingGetElementPosition(content.value);
默认返回x、y坐标,长、宽,距离上、下、左、右距离。
提醒:
传入的需要是一个dom元素,否则则返回空字符串。
xingGetWindowSize (----获取窗口尺寸(高度和宽度)----)
使用方式:
this.$xingGetWindowSize(); // { height: 375, widht: 120 }
setup中使用:
$xingGetWindowSize(); // { height: 375, widht: 120 }
注意:
如果在webWork中使用,则返回 { height: 0, width: 0 }
xingGetType (----获取类型方法----)
使用方式:
this.$xingGetType(11); //Number
this.$xingGetType(''); //String
this.$xingGetType(); //Undefined
this.$xingGetType(true); //Boolean
this.$xingGetType(Symbol()); //Symbol
this.$xingGetType(() => {}); //Function
this.$xingGetType(document); //HTMLDocument
setup中使用:
$xingGetType(11); //Number
$xingGetType(''); //String
$xingGetType(); //Undefined
$xingGetType(true); //Boolean
$xingGetType(Symbol()); //Symbol
$xingGetType(() => {}); //Function
$xingGetType(document); //HTMLDocument
xingObjHasKey (----检测对象中是否存在对应的key----)
使用方式:
let obj = { name: 123 };
this.$xingObjHasKey(obj, 'name'); // true
this.$xingObjHasKey(obj, 'age'); // false
setup中使用:
$xingObjHasKey(obj, 'name'); // true
$xingObjHasKey(obj, 'age'); // false
xingPreventPage (-----禁用页面缩放方法----)
使用方式:
this.$xingPreventPage();
setup中使用:
$xingPreventPage();
提醒:该方法操作的meta标签,一定要在el实例挂载完成之后调用。如果需要全局调用,在根组件中使用即可。
xingScrollingElement (----控制窗体滚动高度----)
使用方式:
this.$xingScrollingElement(200); //滚动到距离顶部200位置
this.$xingScrollingElement(500); //滚动到距离顶部500位置
setup中使用:
$xingScrollingElement(200); //滚动到距离顶部200位置
$xingScrollingElement(500); //滚动到距离顶部500位置
注意:
该滚动到指定位置只能滚动窗口(body)。
xingSolarAndLunar (----日历信息方法----)
使用方式:
let date = this.$xingSolarAndLunar(2022, 3, 13)
console.log(date); //返回带农历、日期、当前周几等等信息。。。
setup中使用:
let date = $xingSolarAndLunar(2022, 3, 13)
注意: 参数区间1900.1.31~2100.12.31
传入参数必须是number类型,且不为NaN。否则则默认返回1900.1.31的信息。
xingSpeech (----语音播放----)
使用方式:
this.$xingSpeech_start('我是播放的语音'); // 开始播放
this.$xingSpeech_pause(); // 暂停播放
this.$xingSpeech_resume(); // 继续播放
this.$xingSpeech_restart(); // 重新开始播放
this.$xingSpeech_stop(); // 停止播放
setup中使用:
$xingSpeech_start('我是播放的语音'); // 开始播放
$xingSpeech_pause(); // 暂停播放
$xingSpeech_resume(); // 继续播放
$xingSpeech_restart(); // 重新开始播放
$xingSpeech_stop(); // 停止播放
提示:
该功能目前还处于测试阶段,自行测试。
xingStopBubble (----阻止冒泡方法----)
使用方式:
this.$xingStopBubble();
setup中使用:
$xingStopBubble()
xingGetImageBase64 (----将图片转换为base64格式----)
使用方法:
let path = 'https://img2.baidu.com/it/u=1710525722,1574432755&fm=253&fmt=auto&app=138&f=PNG?w=839&h=418';
let path1 = require('./assets/img/error_notification.png')
this.$xingGetImageBase64(path1).then((res) => {
console.log(res); //转换成功,返回对应图片的base64
}).catch((err) => {
console.log(err); // 转换失败,返回空字符串('')
})
setup中使用:
$xingGetImageBase64(path1).then((res) => {
console.log(res); //转换成功,返回对应图片的base64
}).catch((err) => {
console.log(err); // 转换失败,返回空字符串('')
})
支持网络图片和本地图片,该方法返回的是一个promise对象,
xingUploadFile (----上传文件----)
使用方式:
<input type="file" accept="*" id="avatar" />
let file = document.getElementById("avatar").files[0]
this.$xingUploadFile(file, 'http://localhost:52330/uploadFile', (e) => {
console.log('当前上传进度:' + e.progress);
}).catch((err) => {
console.log(err);
})
setup中使用:
$xingUploadFile(file, 'http://localhost:52330/uploadFile', (e) => {
console.log('当前上传进度:' + e.progress);
}).catch((err) => {
console.log(err);
})
提示:
目前仅支持POST请求。
params: { file: 文件,url: 上传地址, callback: 回调函数 }
xingZoomEvent (----元素缩放事件----)
使用方式:
<template>
<div id="app">
<div @click="clickBtn">开启缩放</div>
<div style="width: 100px; height: 100px; background: red;" ref="test"></div>
</div>
</template>
<script>
export default {
methods: {
clickBtn() {
this.$xingZoomEvent(this.$refs.test, 3); //第一个参数是元素,第二个参数是最大缩放比
}
},
};
</script>
setup中使用:
<script setup>
const test = ref()
const clickBtn = () => {
$xingZoomEvent(test.value, 3); //第一个参数是元素,第二个参数是最大缩放比
}
</script>
后续会支持关闭缩放
xingMathAdd (----加法运算----)
使用方式:
this.$xingMathAdd(-20.125, 2.105); // -18.02
setup中使用:
$xingMathAdd(-20.125, 2.105) // -18.02
xingMathSub (----减法运算----)
使用方式:
this.$xingMathSub(-20.125, 2.105); // -22.23
setup中使用:
$xingMathSub(-20.125, 2.105) // -22.23
xingMathMul (----乘法运算----)
使用方式:
this.$xingMathMul(2.5, 2.5); // 6.25
setup中使用:
$xingMathMul(2.5, 2.5) // 6.25
xingMathDiv (----除法运算----)
使用方式:
this.$xingMathDiv(2.5, 2.5); // 1
setup中使用:
$xingMathDiv(2.5, 2.5) // 1
1.3.18
2 years ago
1.3.19
2 years ago
1.3.20
1 year ago
1.3.21
1 year ago
1.3.13
2 years ago
1.3.14
2 years ago
1.3.12
2 years ago
1.3.17
2 years ago
1.3.15
2 years ago
1.3.16
2 years ago
1.3.11
2 years ago
1.3.10
2 years ago
1.3.9
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago