xing-ui-mobile

Project setup

npm install xing-ui-mobile

引入方式：

在入口文件中：

import xing from 'xing-ui-mobile'
import 'xing-ui-mobile/xing-ui.css'

Vue.use(xing)

目前还在积极开发组件中. 提示： 如果你对该组件的样式不满足，可以采用样式穿透来进行修改。所有组件都是动态计算css样式属性值了， 不用担心修改样式之后会造成样式错乱。

目前完善的组件有:

xing-calendar (----日历组件----)

  使用方式：
  <template>
    <div>
      <xing-calendar multiple :animation="false" :date="['2022-10-14']" @change="onChange"></xing-calendar>
    </div>
  </template>

  <script>
    export default {
      methods: {
        onChange(e) {
          console.log(e)
        }
      }
    }
  </script>

  props:
    multiple (是否多选，默认false)
    animation (切换日期偏移动画，默认true)
    date (勾选日期，仅支持数组Array类型，且值必须是yyyy-MM-DD格式。默认拿第一项作为展示页。如果不传任何值则显示当前时间日期)

  event:
    @change  (所选中的日期)

xing-popup (----自定义弹窗组件----)

  使用方式：
    <xing-popup popupTitle="请选择时间" bottomTitle="关闭" v-model="isShowPopup">
      <template slot="headerLeft">取消</template>
      <template slot="headerRight">确定</template>
    </xing-popup>

  props: popupTitle (弹窗头部标题)
         showBottomBtn (是否显示底部按钮， 默认true)
         clickMaskClosePopup (是否开启点击遮罩层关闭弹窗，默认true)
         bottomTitle (底部按钮显示的文字，默认确定)
  
  slot：headerLeft（具名插槽，弹窗头部左侧）
        headerRight （具名插槽，弹窗头部右侧侧）

  v-model: 控制组件显示隐藏

xing-notification (----通知组件----)

使用方式：

      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)

xing-loading (----加载框组件----)

使用方式：

  显示加载框
  已做dom节点控制，不用担心多次调用会叠加dom元素
  this.$showXingLoading({
    type: 'wave',  //加载框类型，可选：wave、annularBall，默认：wave
    position: 'bottom'  //加载框位置，可选：top、center、bottom (这三种都是水平居中。如果传入其他位置，都会默认top)，默认：top
  })

  隐藏加载框
  this.$hideXingLoading()

xing-alter (----弹出框组件----)

使用方式：

  完全写法：
    this.$xingAlter({
      title: '警告',   //标题
      content: '电量不足，是否马上充电？',  //内容
      buttonLeft: {
        type: 'wrong',  //风格，默认normal，可选wrong。也可以自定义文字颜色
        text: '取消',
        func: () => {
          console.log('取消');
        }
      },
      buttonRight: {
        type: 'rgba(0, 0, 0, 0.4)', //风格，默认normal，可选wrong。也可以自定义文字颜色
        text: '确定',
        func: () => {
          console.log('确定');
        }
      }
    })

  简约风格：
    this.$xingAlter({
        title: '警告',   //标题
        content: '电量不足，是否马上充电？',  //内容
      })

    提示： 如果没有指定buttonLeft且没有指定buttonRight，则会默认显示一个文本为‘知道了’的底部按钮。
          如果定义了buttonLeft且定义了buttonRight，但是没有给其text文本，将不显示按钮，如果两个都没文本，将会显示默认‘知道了’的底部按钮。
          func是所需要执行的函数，这里的逻辑我放入到promise中执行拿到回调来摧毁alter弹窗，建议此处操作的逻辑不要过多，否则弹窗存在延时关闭。

xing-toast (----轻提示组件----)

  使用方式： 
  this.$xingToast('明天不要忘记对象的生日哦～')

xing-drag-cell (----左滑操作组件----)

  使用方式： 
      <xing-drag-cell :btnTitle="['回复', '删除']" @clickCellEvent="clickRightBtn"></xing-drag-cell>

  props: 
        btnTitle (右侧按钮标题)
        hide (点击右侧按钮之后，是否隐藏该组件。默认false)
  event:
      @clickCellEvent (点击事件)
  slot: 
      可以自定义滑动区域内容
      
    提醒： 右侧按钮已做数量控制，即使传入的标题为两个以上，最大显示数量就只显示前两位按钮。

xing-pull-refresh (----下拉刷新组件----)

  <template>
    <xing-pull-refresh :type="type" ref="pullRefresh" @openRefresh="isOpen">
      <template slot="icon">
        <!-- 自定义动画 -->
      </template>
      <div>模拟请求三秒</div>
      <div>纯css代替js-translate</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>
export default {
  data() {
    return {
      type: 'wave'
    };
  },
  methods: {
    isOpen(bool) {
      if (bool) {
        setTimeout(() => {
          this.$refs.pullRefresh.closeRefresh()
        }, 3000)
      }
    }
  },
};
</script>

  提示：
    props:
      type (加载动画类型，有wave和annularBall两种类型，如果使用自定义动画则以自定义动画为主)

    emit:
      openRefresh (是否完全展开下拉刷新动画部分，下拉完全展开或关闭触发)
    
    slot：
      具名插槽：icon
      普通插槽：<slot></slot>

    event:
      closeRefresh (关闭下拉刷新动画)

xing-switch (----switch开关组件----)

  使用方式：
    <xing-switch v-model="status"></xing-switch>

    <script>
      export default {
        data() {
          return {
            status: false
          };
        }
      };
    </script>

  v-model: 
        status (开关初始状态，默认false)
      
    提醒： 在子组件中已经深度监听开关、以及监听初始值开关状态，可以放心使用。

xingPreventPage (-----禁用页面缩放方法----)

  使用方式：
      this.$xingPreventPage();

    提醒：该方法操作的meta标签，一定要在el实例挂载完成之后调用。如果需要全局调用，在根组件中使用即可。

xingArrayIsEqual (----判断两个一维数组是否相等----)

  使用方式：
      this.$xingArrayIsEqual([1,[1]],[1,[2]]);   //false
      this.$xingArrayIsEqual([1],[1,[2]]);   //false
      this.$xingArrayIsEqual([], []);   //true
      this.$xingArrayIsEqual([1], ['1']);   //false

    提醒： 该方法使用Array.flat(Infinity)深度展开数组，不建议判断多维数组。
        如： this.$xingArrayIsEqual([[2], 1], [1, [2]]);   //true
            此时则返回true，在一定程度上对于一维数组是完全无误的、但是多维数组可能判断不准确。

xing-collapse (----折叠面板组件----)

  使用方式：
      <xing-collapse title="今日任务" :isOpen="true">
        <div>我是内容</div>
        <div>我是内容</div>
        <div>我是内容</div>
        <div>我是内容</div>
      </xing-collapse>

    props:
      title (折叠面板标题)
      isOpen (折叠面板是否展开，默认不展开)
    
    slot：
      内容插槽

    点击头部展开、关闭。

xing-drawer (----抽屉组建----)

  使用方式：
    <template>
      <div>
        <button @click="btnClick">打开抽屉</button>
        <xing-drawer position="right" v-model="openDrawer"></xing-drawer>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          openDrawer: false
        }
      },
      methods: {
        btnClick() {
          this.openDrawer = !this.openDrawer
        }
      }
    }
    </script>

    props: 
      position (抽屉从哪边展开，默认right。可选值： left、right、top、bottom。)
      maxH (最大高度)
      maxW (最大宽度)
      v-modle: 双向绑定值，用于抽屉显示隐藏

    slot:
      内容插槽，可自定义抽屉中显示内容

    注意： position如果传入非left、right、top、bottom值，则默认使用right。

xingLoadingBar(----顶部进度条加载组件----)

  使用方法：
    this.$xingLoadingBar_start();   //开始加载
    this.$xingLoadingBar_finish();   //加载完成
    this.$xingLoadingBar_fail();   //加载失败
    this.$xingLoadingBar_hide();   //隐藏加载条

    提醒： 如果你不喜欢默认加载条的样式，可以使用该方法修改进度条配置
    this.$xingLoadingBar_config({
      color: 'blue',  //正常加载的进度条颜色，支持16进制色值、rgb、rgba等
      failColor: 'red', //加载失败的进度条颜色，支持16进制色值、rgb、rgba等
      height: 4  //进度条高度， 默认2
    })

xing-input (----输入框组件----)

  使用方式：
    <xing-input type="password" inputmode="numeric" :focus="false" placeholder="密码" v-model="value"></xing-input>

  props:
    type (输入框类型，默认text)
    placeholder (提示文本)
    inputmode (唤起什么类型的键盘)
    focus (首次渲染是否自动聚焦)

  event:
    @focus (触焦事件)
    @blur (失去焦点事件)

  提示：***
      inputmode可选值：text、none、decimal、numeric、tel、search、email、url
        text: 默认值，会显示标准输入键盘
        none: 不使用虚拟键盘，这个时候页面需要使用自定义的键盘代替(后续我也会提供一个自定义键盘组件，如果不满意可以自己封装)
        decimal: 小数表示键盘，除了数字之外可能会有小数点 . 或者千分符逗号 ,。
        numeric: 显示0-9的数字键盘。
        tel: 手机数字键盘，会有星号 * 或者井号 # 键。
        search: 提交按钮会显示 'search' 或者 ‘搜索’。
        email: 键盘上会有 @ 符号键。
        url: 键盘上会有斜杠 / 符号键。

  因为我手中机型较少，没有经过大量测试，苹果都挺支持。
  该组件带有css动画，增强用户体验，后续会继续优化。

xing-tabs (----选项卡组件----)

  使用方式：
    <xing-tabs v-model="tabsIndex" :tabsList="['第一', '第二', '哈哈']"></xing-tabs>

  props:
    tabsList (选项卡标题，默认['选项卡1', '选项卡2'])

  v-model：
    当前选中下标，该属性和子组件双向数据绑定，可以指定默认选中下标，也可以依靠此属性
    得到子组件所选中的下标来进一步的操作相关逻辑。

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进行绑定。

xingGetRandomNumber (----生成范围随机数----)

  使用方法：
    this.$xingGetRandomNumber(100);  //返回一个0 - 100的随机数
    this.$xingGetRandomNumber(50);  //返回一个0 - 50的随机数
    this.$xingGetRandomNumber();  //不传入任何值则返回 0

xingGetRandomAtoZ (----生成a-z或者A-Z之内的字母)

  使用方式：
    this.$xingGetRandomAtoZ(true) //如果传入true，则返回 A-Z 范围中一个字母
    this.$xingGetRandomAtoZ(false) //如果传入false，则返回 a-z 范围中一个字母
    this.$xingGetRandomAtoZ()  //如果不传则默认返回a-z中一个字母

xing-keyboard (----自定义数字键盘组件----)

  在移动端中，安卓和苹果唤起的手机键盘可能样式不一样，所以提供一个统一样式的数字键盘。

  使用方法：
    <xing-keyboard v-model="openKeyboard" @change="clickKey" :isShowTitle="true" topTitle="安全键盘">
      <template slot="topRightBtn">
        <div @click="openKeyboard = false">
          完成
        </div>
      </template>
    </xing-keyboard>

  props:
    isShowTitle (是否显示键盘标题，默认false)
    topTitle (键盘标题文本)
  
  v-model:
    控制键盘显示和隐藏
  
  slot(具名插槽topRightBtn):
    顶部标题右侧按钮，可传入文本。不传入默认显示 '关闭'
  
  event:
    @change (当前所点击的按键)

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);  // 转换失败，返回空字符串('')
    })

    支持网络图片和本地图片，该方法返回的是一个promise对象，

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
    

xingGetAppSource (----判断移动端机型----)

  使用方式：
    this.$xingGetAppSource();   //会返回机型，返回ios或者android
    

xingScrollTopOrBottom (----定位到页面顶部或者底部----)

  使用方式：
    this.$xingScrollTopOrBottom(bool, el);  //

    this.$xingScrollTopOrBottom(true, document.body);   //返回窗口顶部
    this.$xingScrollTopOrBottom(true, this.$refs.list);   //返回指定元素顶部

    this.$xingScrollTopOrBottom(true);   //返回指定元素顶部
    this.$xingScrollTopOrBottom(false);   //返回底部
    this.$xingScrollTopOrBottom();   //返回底部

  如果你只是想让嵌套的子页面滚动到顶部，即可这样调用：
    let childrenEl = this.$refs.myScrollView;  (注意：这里的myScrollView是我绑定的ref对象。实际场景需要根据你们自己的需求)
    this.$xingScrollTopOrBottom.call(childrenEl);

  提示：
    因为控制的是el实例，一定要确保dom元素的的确确渲染之后才能调用，否责可能报错哦～。
    如果传入其他Boolean类型为false的，即统一返回底部，如：0，'', null, undefined

xingGetBattery (----获取手机电量信息----)

  使用方式：
    this.$xingGetBattery().then(res => {
      console.log(res);
    })

  注意：  该方法只对安卓手机生效！！！
  注意：  该方法只对安卓手机生效！！！
  注意：  该方法只对安卓手机生效！！！

  提示：
    会返回电池相关信息。
    charging (是否正在充电)
    chargingTime (还需要多久充满电)
    dischargingTime (电量可用时间)
    level (当前电量，0-1范围，1表示充满。)

    其他充电改变事件：
    onchargingchange (充电状态改变所触发事件)
    onchargingtimechange  (一旦充电时间改变所触发事件)
    ondischargingtimechange (当用电时间变化所触发事件)
    onlevelchange (电池电量发生变化所触发事件)

xingProgress (----进度条组件----)

  使用方式：
    <xing-progress
     type="circle"
     v-model="progress"
     :size="60"
     :strokeWidth="6"
     strokeBgColor="red"
     strokeColor="blue"
    >
      <div slot="circle" style="font-size: 12px;">
        进度：{{progress}}
      </div>
    </xing-progress>


  props：
    v-model: 进度条百分比
    type: 进度条类型（默认bar，可选circle。bar是条状，circle是环形的）
    size: 环形进度条大小
    strokeWidth: 环形进度条弧形宽度
    strokeBgColor：未覆盖的颜色
    strokeColor： 进度条颜色

  slot:
    环形进度条中间内容。不传入内容默认显示百分比。
  

xingPreviewImg (----图片预览组件----)

  使用方式：
  let path = 'https://img2.baidu.com/it/u=1710525722,1574432755&fm=253&fmt=auto&app=138&f=PNG?w=839&h=418'
    this.$xingPreviewImg({
      imgInfo: {
        imgUrl: path,
        func: (e) => {
          //TODO ...
          console.log(e);
        }
      },
      onerrorImg: './assets/img/error.png'
    })

  提示：
    onerrorImg: 图片加载失败显示的图片。不传图片则默认显示我定义的错误图片。

    imgUrl: 需要预览的图片，支持网络图片以及本地图片
    func: 回调函数，可以在此函数中自定义逻辑。

    该预览支持单击关闭预览。支持长按事件。

    提醒： 该预览组件，必须按照我这种格式写，onerrorImg可以不用写。其他的必须写。因为组件中的逻辑已经固定了。
          之后会优化该组件。

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}%`);
    });
  
  提示：
      url: 文件下载地址
      filename: 文件下载之后，保存的文件名
      第三个参数，是接收下载进度回调(返回下载进度，以及下载完成之后的blob)。
      blob可用来转base64，如果是pdf文件，可以转换base64来显示...

    目前只支持get请求。之后会兼容所有请求

xingGetElementPosition (----获取dom元素位置----)

  使用方式：
    <div ref="content">哈哈哈</div>

    let pos = this.$xingGetElementPosition(this.$refs.content);
    
    默认返回x、y坐标，长、宽，距离上、下、左、右距离。

    提醒：
      传入的需要是一个dom元素，否则则返回空字符串。

xingBlobToBase64 (----将blob转换为base64----)

  使用方式：
    let blob = 'blob:localhost:8080/xxxxxxx'
    this.$xingBlobToBase64(blob).then((res) => {
      console.log(`转换之后的base64: ${res}`);
    }).catch((error) => {
      ....
    })

xingBase64ToBlob (----将base64转换为blob----)

  使用方式：
    let base64 = 'base...........x'
    let blob = this.$xingBase64ToBlob(base64);
    console.log(blob);

xingBlobToFile (----将blob转换为file----)

  使用方式：
    let base64 = 'base...........x'
    let blob = this.$xingBase64ToBlob(base64);

    this.$xingBlobToFile(blob, 'xxxx文件');   //参数一：blob对象。参数二：文件名，不传入则显示xing-default-filename

  提醒：
    实际开发根据自己需求来转换。
    实际开发中肯定比这个复杂，如果你只是一个图片的url，
    可以使用之前提供的 url -> base64 -> blob -> file。

xingCompressedImg (----压缩图片方法----)

  使用方式：
    let img = 'http://xxxx.com'
    this.$xingCompressedImg(img, 0.8).then((res) => {
      console.log(`压缩后的图片：${res}`)
    })

  注意：
    第一个参数传入的img可以是本地图片、网络图片、也可以是base64。
    第二个参数是压缩率。
    压缩后的图片以base64格式返回。

xingSolarAndLunar (----日历信息方法----)

  使用方式：
    let date = this.$xingSolarAndLunar(2022, 3, 13)
    console.log(date);  //返回带农历、日期、当前周几等等信息。。。

    注意： 参数区间1900.1.31~2100.12.31
          传入参数必须是number类型，且不为NaN。否则则默认返回1900.1.31的信息。

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

xingGetWindowSize (----获取窗口尺寸(高度和宽度)----)

  使用方式：
    this.$xingGetWindowSize();  // { height: 375, widht: 120 }

  注意：
    如果在webWork中使用，则返回 { height: 0, width: 0 }

xingEncodeUtf8 (----编码utf-8方法----)

  使用方式：
    this.$xingEncodeUtf8(124);  // [49, 50, 52]

xingDecodeUtf8 (----utf-8解码方法----)

  使用方式：
    this.$xingDecodeUtf8([49, 50, 52]);  //124

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

  注意：
    第一个参数是需要转换的对象，第二个是转换类型；
    1(首字母大写, 其他字母不变)
    2(首字母小写，其他字母不变)
    3(大小写转换)
    4(全部大写)
    5(全部小写)
    其他数值或者不穿类型，都会返回自身。

xingCheckType (----常用正则校验----)

  使用方式：
    this.$xingCheckType('1234567', 'email');  //false

    注意：
      第一个参数是需要校验的对象。
      第二个参数是校验的类型(可选：email、phone、tel、number、english、chinese、lower、upper)
      email： 邮箱
      phone： 手机号码
      tel： 座机号码
      number： 数字
      english： 英文
      chinese： 中文
      lower： 全部小写
      upper： 全部大写

xingCountStr (----获取字符串中每一个字符出现的次数----)

  使用方式：
    this.$xingCountStr('sdfsdfsdfsdj地方kkfsjdlfjsdjflsdjfl');

    此时会返回： {d: 7,f: 7,j: 5,k: 2,l: 3,s: 7,地: 1,方: 1}

xingGetChinese (----获取字符串中所有中文----)

  使用方式：
    this.$xingGetChinese('123121dsfsdf是帆帆帆帆');   //是帆帆帆帆
    

xingSkeleton (----骨架屏组件----)

  使用方式：
    <xing-skeleton :isFinished="isFinished" :animated="false" :skeletonBgColor="'rgba(0,0,0,0.5)'" :defaultBorderRadius="12">
      <div>哈哈哈</div>
      <div>哈哈哈</div>
      <div>哈哈哈</div>
      <div>哈哈哈</div>
      <div>哈哈哈</div>
      <div>哈哈哈</div>
      <div>哈哈哈</div>
    </xing-skeleton>

    <script>
      export default {
        data() {
          return {
            isFinished: false,
          }
        },
        mounted() {
          setTimeout(() => {
            this.isFinished = true;
          }, 3000)
        }
      }
    </script>

  提示：
    props:
      isFinished (关闭骨架屏，true即关闭，默认false)
      skeletonBgColor (骨架屏背景颜色，默认#f2f2f2)
      animated (是否开启骨架屏加载动画，默认false)
      defaultBorderRadius (骨架圆角，默认5。注意：如果子元素存在圆角属性且圆角不为0，则显示开发者自定义的圆角。如果为0，则显示默认骨架圆角。)
    
    slot:
      需要放入的内容

  该组件已经通过获取dom位置，无需开发者自定义。
  如果插槽内容中存在圆角，将会动态设置。如果不存在圆角，就会以默认的圆角显示。

xingStopBubble (----阻止冒泡方法----)

  使用方式：
    this.$xingStopBubble();

xingCamel2Dash (----驼峰转成短横线----)

  使用方式：
    this.$xingCamel2Dash('asgFlsdfEfcx');  // asg-flsdf-efcx

xingEncryption (----加密----)

  使用方式：
    let str = this.$xingEncryption('sdflweomlksdlfjllLKJLKSDPEGCVXFGSD')
    console.log(str); //ǒ≣㊩ℜ⊞у≗‰よℌ≿⊺ǚ゠ほø⋷⋎≕ヽ㊔ℬⅢ⋁≍%㊊㊛⋩⊭ɡヱめ㊨∻⋁ň∯㊰ℕ≴ж≖≢つ♛⊖з≕ヽ㊔ℬⅢ⋁≄レ㊜ℎ⊡вǒ.....(省略剩余部分)

xingDecrypt(----解密----)

  使用方式：
    let bb = this.$xingDecrypt('ǒ≣㊩ℜ⊞у≗‰よℌ≿⊺ǚ゠ほø⋷⋎≕ヽ㊔ℬⅢ⋁≍%㊊㊛⋩⊭ɡヱめ㊨∻⋁ň∯㊰ℕ≴ж≖≢つ♛⊖з≕ヽ㊔ℬⅢ⋁≄レ㊜ℎ⊡вǒ.....')
    console.log(bb);  //sdflweomlksdlfjllLKJLKSDPEGCVXFGSD

xingRegenerateRules (----重新生成加密规则----)

  使用方式：
    this.$xingRegenerateRules();

xingOpenAutoScheme (----开启自适应系统暗黑模式----)

  使用方式：
    this.$xingOpenAutoScheme();
    

xingCloseAutoScheme (----关闭自适应系统暗黑模式----)

  使用方式：
    this.$xingCloseAutoScheme();

xingOpenDarkSchemeWithForce (----强制开启暗黑模式----)

  使用方式：
    this.$xingOpenDarkSchemeWithForce();

xingFragmentation (---碎片特效组件----)

  使用方式：
    <xing-fragmentation>
      <div style="background-color: grey; width: 200px; height: 300px;"></div>
    </xing-fragmentation>

  提示：
    slot: 插槽

    该组件具有碎片特效。可自行使用。
    

xingCopyText (----复制文本----)

  使用方式：
    this.$xingCopyText('我是复制文本');
    this.$xingCopyText('');  // ''
    this.$xingCopyText();  //undefined
    

xingScrollingElement (----控制窗体滚动高度----)

  使用方式：
    this.$xingScrollingElement(200);  //滚动到距离顶部200位置
    this.$xingScrollingElement(500);  //滚动到距离顶部500位置

  注意：
    该滚动到指定位置只能滚动窗口(body)。

xingClickDocumentAnimation (----点击窗口展现文字动画----)

  使用方式：
    this.$xingClickDocumentAnimation(['富强', '民主', '文明', '和谐'])

  提示：
    传入的参数必须是数组。其中的内容是需要展现的数据。

xingCloseClickAnimation (----关闭点击窗口文字动画)

  使用方式： 
    this.$xingCloseClickAnimation();

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);
    })

  提示：
    目前仅支持POST请求。

  params: { file: 文件，url： 上传地址， callback： 回调函数 }
  

xingShowWatermark (----显示背景水印----)

  使用方式：
    this.$xingShowWatermark('我是水印');

xingHideWatermark (----隐藏背景水印----)

  使用方式：
    this.$xingHideWatermark();
    

xingSpeech (----语音播放----)

  使用方式：

    this.$xingSpeech_start('我是播放的语音');   // 开始播放
    
    this.$xingSpeech_pause();   // 暂停播放

    this.$xingSpeech_resume();   // 继续播放

    this.$xingSpeech_restart();   // 重新开始播放

    this.$xingSpeech_stop();   // 停止播放

    提示：
      该功能目前还处于测试阶段，自行测试。

xingDateIsValid (----检验日期是否合法----)

  使用方式：
    this.$xingDateIsValid('2022-01-01') // true

xingObjHasKey (----检测对象中是否存在对应的key----)

  使用方式：
    let obj = { name: 123 };
    this.$xingObjHasKey(obj, 'name'); // true
    this.$xingObjHasKey(obj, 'age'); // false
    

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>
    export default {
      data() {
        return {
          myDataList: Array.from({ length: 10 }, (_, index) => index)
        };
      }
    };
    </script>

  提示：
    props:
      dataList 数据
      showDots (是否展示指示点，默认false)

    slot-scope:
      scope (作用域插槽)
        返回一个对象，$index (当前下标), currentItemData (当前绑定的数据)

      此处的#default也可以写成slot-scope

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>

    后续会支持关闭缩放

xingGetFileBinary (----file转二进制方法----)

  使用方式：
    this.$xingGetFileBinary(file); 

xingMathAdd (----加法运算----)

  使用方式：
    this.$xingMathAdd(-20.125, 2.105);  // -18.02

xingMathSub (----减法运算----)

  使用方式：
    this.$xingMathSub(-20.125, 2.105);  // -22.23

xingMathMul (----乘法运算----)

  使用方式：
    this.$xingMathMul(2.5, 2.5);  // 6.25

xingMathDiv (----除法运算----)

  使用方式：
    this.$xingMathDiv(2.5, 2.5);  // 1