更新记录

1.0.1（2023-09-28）

行内样式抽离插件已经做了升级，无需用户更改template标签，自动解析所选内容的行内样式抽离出来，自动生成class类名，支持自定义组件名 建议用户将node版本升级到最高版本

0.0.0（2023-03-19）

初始版本

平台兼容性

HBuilderX最低兼容版本
2.7.0

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

这个插件的目的主要是将行内样式自动转成scss内联样式，自动命名class名称，提高前端开发效率，使前端只需注重页面布局以及页面效果

抽离前

<template>
    <view style="position: absolute;background-color: rgba(247, 249, 250, 1);width: 100%;min-height: 100%;">
        <cu-custom background="#fff"  >
            <block slot="content">
                门店设置
            </block>
        </cu-custom>
        <view class="">
            <view class="flex align-center justify-between bg-white"
                style="width: 100%;margin-top: 20rpx;padding-right: 40rpx;height: 100rpx;">
                <view class="" style="width: 400rpx;margin: 0rpx 52rpx 0rpx 30rpx;
height: 38rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #666666;
line-height: 38rpx;">
                    营业开始时间
                </view>

                <view class="" style="margin: 34rpx 0rpx;width: 100%;">
                    <picker mode="time" :value="time" :start="startTime" :end="endTime" @change="bindTimeChange">
                        <view class="flex align-center justify-between">
                            <view class="uni-input">{{time?time:"请选择营业开始时间"}} </view>
                            <text class="cuIcon-right"
                                style="color:rgba(209, 209, 209, 1);transform:scale(1.2);font-weight: bold;margin-left: 38rpx;"></text>
                        </view>
                    </picker>
                </view>
            </view>

            <view class="flex align-center justify-between bg-white"
                style="width: 100%;margin-top: 2rpx;padding-right: 40rpx;height: 100rpx;">
                <view class="" style="width: 400rpx;margin: 0rpx 52rpx 0rpx 30rpx;
            height: 38rpx;
            font-size: 32rpx;
            font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
            font-weight: 400;
            color: #666666;
            line-height: 38rpx;">
                    营业结束时间
                </view>

                <view class="" style="margin: 34rpx 0rpx;width: 100%;">
                    <picker mode="time" :value="time" :start="startTime" :end="endTime" @change="bindTimeChange">
                        <view class="flex align-center justify-between">
                            <view class="uni-input">{{time?time:"请选择营业结束时间"}} </view>
                            <text class="cuIcon-right"
                                style="color:rgba(209, 209, 209, 1);transform:scale(1.2);font-weight: bold;margin-left: 38rpx;"></text>
                        </view>
                    </picker>
                </view>
            </view>
            <view class="flex align-center bg-white" style="width: 100%;margin-top: 2rpx;">
                <view class="" style="width: 400rpx;margin: 0rpx 52rpx 0rpx 30rpx;
height: 38rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #666666;
line-height: 38rpx;">
                    起送费设置
                </view>
                <input style="width: 100%;margin: 28rpx 0rpx;
             height: 38rpx;
             font-size: 32rpx;
             font-family: Source Han Sans CN-Regular, Source Han Sans CN;
             font-weight: 400;
             color: #C1C5C9;
             line-height: 38rpx;" type="text" placeholder="请设置起送费">
            </view>
            <view class="bg-white" style="width: 100%;margin-top: 20rpx;">
                <view class="" style="margin: 0rpx 52rpx 0rpx 30rpx;padding-top: 24rpx;
            height: 38rpx;
            font-size: 32rpx;
            font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
            font-weight: 400;
            color: #666666;
            line-height: 38rpx;">
                    门店背景图片设置
                </view>
                <view class="" style="padding: 60rpx 30rpx 40rpx 30rpx;">
                    <uni-file-picker limit="1"></uni-file-picker>
                </view>
            </view>
            <button style="width: 670rpx;margin-top: 106rpx;
height: 96rpx;
background: linear-gradient(131deg, #74A8FB 0%, #5488FD 100%);
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
line-height: 96rpx;">保存</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                time: null,
                startTime: "00:00",
                endTime: "23:59",
            }
        },
        methods: {
            bindTimeChange: function(e) {
                this.time = e.detail.value
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>

第一步

修改前

image.png
修改后

image.png

第二步

image.png

第三步

image.png

第四步 修改之后将div class="root"标签改回template标签

<div class="root">
  <view class="view-87-1">
    <cu-custom background="#fff" class="cu-custom-88-1">
      <block slot="content" class="block-89-1">
        门店设置
      </block>
    </cu-custom>
    <view class="view-88-2">
      <view class="flex align-center justify-between bg-white view-91-1">
        <view class="view-92-1">
          营业开始时间
        </view>

        <view class="view-92-2">
          <picker mode="time" :value="time" :start="startTime" :end="endTime" @change="bindTimeChange" class="picker-94-1">
            <view class="flex align-center justify-between view-95-1">
              <view class="uni-input view-96-1">{{time?time:"请选择营业开始时间"}} </view>
              <text class="cuIcon-right text-96-2"></text>
            </view>
          </picker>
        </view>
      </view>

      <view class="flex align-center justify-between bg-white view-91-2">
        <view class="view-99-1">
          营业结束时间
        </view>

        <view class="view-99-2">
          <picker mode="time" :value="time" :start="startTime" :end="endTime" @change="bindTimeChange" class="picker-101-1">
            <view class="flex align-center justify-between view-102-1">
              <view class="uni-input view-103-1">{{time?time:"请选择营业结束时间"}} </view>
              <text class="cuIcon-right text-103-2"></text>
            </view>
          </picker>
        </view>
      </view>
      <view class="flex align-center bg-white view-91-3">
        <view class="view-106-1">
          起送费设置
        </view>
        <input type="text" placeholder="请设置起送费" class="input-106-2">
      </view>
      <view class="bg-white view-91-4">
        <view class="view-109-1">
          门店背景图片设置
        </view>
        <view class="view-109-2">
          <uni-file-picker limit="1" class="uni-file-picker-111-1"></uni-file-picker>
        </view>
      </view>
      <button class="button-91-5">保存</button>
    </view>
  </view>
</div> 
<style lang="scss" scoped>
  .view-87-1 {
    position: absolute;
    background-color: rgba(247, 249, 250, 1);
    width: 100%;
    min-height: 100%;

    .cu-custom-88-1 {
      .block-89-1 {}
    }

    .view-88-2 {
      .view-91-1 {
        width: 100%;
        margin-top: 20rpx;
        padding-right: 40rpx;
        height: 100rpx;

        .view-92-1 {
          width: 400rpx;
          margin: 0rpx 52rpx 0rpx 30rpx;
          height: 38rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #666666;
          line-height: 38rpx;
        }

        .view-92-2 {
          margin: 34rpx 0rpx;
          width: 100%;

          .picker-94-1 {
            .view-95-1 {
              .view-96-1 {}

              .text-96-2 {
                color: rgba(209, 209, 209, 1);
                transform: scale(1.2);
                font-weight: bold;
                margin-left: 38rpx;
              }
            }
          }
        }
      }

      .view-91-2 {
        width: 100%;
        margin-top: 2rpx;
        padding-right: 40rpx;
        height: 100rpx;

        .view-99-1 {
          width: 400rpx;
          margin: 0rpx 52rpx 0rpx 30rpx;
          height: 38rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #666666;
          line-height: 38rpx;
        }

        .view-99-2 {
          margin: 34rpx 0rpx;
          width: 100%;

          .picker-101-1 {
            .view-102-1 {
              .view-103-1 {}

              .text-103-2 {
                color: rgba(209, 209, 209, 1);
                transform: scale(1.2);
                font-weight: bold;
                margin-left: 38rpx;
              }
            }
          }
        }
      }

      .view-91-3 {
        width: 100%;
        margin-top: 2rpx;

        .view-106-1 {
          width: 400rpx;
          margin: 0rpx 52rpx 0rpx 30rpx;
          height: 38rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #666666;
          line-height: 38rpx;
        }

        .input-106-2 {
          width: 100%;
          margin: 28rpx 0rpx;
          height: 38rpx;
          font-size: 32rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #C1C5C9;
          line-height: 38rpx;
        }
      }

      .view-91-4 {
        width: 100%;
        margin-top: 20rpx;

        .view-109-1 {
          margin: 0rpx 52rpx 0rpx 30rpx;
          padding-top: 24rpx;
          height: 38rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #666666;
          line-height: 38rpx;
        }

        .view-109-2 {
          padding: 60rpx 30rpx 40rpx 30rpx;

          .uni-file-picker-111-1 {}
        }
      }

      .button-91-5 {
        width: 670rpx;
        margin-top: 106rpx;
        height: 96rpx;
        background: linear-gradient(131deg, #74A8FB 0%, #5488FD 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 96rpx;
      }
    }
  }
</style>

<script>
    export default {
        data() {
            return {
                time: null,
                startTime: "00:00",
                endTime: "23:59",
            }
        },
        methods: {
            bindTimeChange: function(e) {
                this.time = e.detail.value
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...