uni-app低成本封装一个取色器组件的简单方法

Editor

在uni-ui中找不到对应的工具
后面想想也是 移动端取色干什么？
没办法 也挂不住特殊需求
因为去应用市场下载 这总东西 又不是很有必要
那么 下面这个组件或许能解决您的烦恼

       
               
                       
                                {}" :style="'transform:rotate(' +degrees +'deg)'">
                                拖转轮播取色
                       
                       
                                取消
                                确认
                       
               
       



        .dialog {
                display: block;
                border-radius: 30rpx;
                background-color: #303030;
                margin: 20rpx;
                padding: 30rpx;
        }
        .flex {
                display: flex;
                justify-content: space-between;
        }
        .colorBg {
                width: 80vw;
                height: 80vw;
                margin: 5vw;
                background: conic-gradient(red,
                                yellow,
                                lime,
                                aqua,
                                blue,
                                fuchsia,
                                red);
                border-radius: 50%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
        }
        .roundBuff {
                width: 55vw;
                height: 55vw;
                -webkit-transform-origin: center 50%;
                transform-origin: center 50%;
                background: #303030;
                border-radius: 50%;
        }
        .roundBuff::before {
      content: "";
      width: 15px;
      height: 15px;
          background: #303030;
      border: solid #303030;
      border-width: 10px 10px 0 0;
      transform: translate(-50%, -50%) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 2%;
}
        .lee_btn {
                background: #00000000;
                color: #FFFFFF;
                width: 36%;
                height: 80rpx;
                line-height: 70rpx;
                text-align: center;
                justify-content: center;
                font-size: 30rpx;
                border-radius: 50rpx;
                border: 5rpx #FFFFFF solid;
                font-weight: bold;
                padding: 1px 20px;
        }
        .colorPan {
                position: absolute;
                color: #FFFFFF;
        }

直接将整个组件复制过去 接口使用

2023022015465658.png

组件有两个方法

change 当你点击确定时触发 返回 RGB 色码

close 当你点击取消时触发

2023022015465659.png

总结
到此这篇关于uni-app低成本封装一个取色器组件的文章就介绍到这了,更多相关uni-app封装取色器组件内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛！

贺老师

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！

123456809

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

冀苍鸾

楼主发贴辛苦了，谢谢楼主分享！我觉得知鸟论坛是注册对了！

丁侦球

既然你诚信诚意的推荐了，那我就勉为其难的看看吧！知鸟论坛不走平凡路。

永远爱你冰塘

其实我一直觉得楼主的品味不错！呵呵！知鸟论坛太棒了！

米老鼠和蓝精鼠v

这东西我收了！谢谢楼主！知鸟论坛真好！

ffycxyw2274436

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

井底燕雀傥

这东西我收了！谢谢楼主！知鸟论坛真好！

462710480

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！