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