c-tip

提示

示例

  1. <template>
  2. <page title="c-tip演示">
  3.   <view class="tip-eg">
  4.   <c-tip show="{{showtip1}}" direction="top" c-bind:close="closeTip1" style="position:absolute;top:0;left:300cpx;">
  5.     <text style="font-size: 24cpx;color: #fff">Tip</text>
  6.   </c-tip>
  7.   <text class="tip-btn" c-bind:tap="showTip1">Show tip</text>
  8. </view>
  10. <view class="tip-eg">
  11.   <c-tip show="{{showtip2}}" direction="{{direction}}" c-bind:close="closeTip2" style="{{tipStyle}}">
  12.     <text style="font-size: 24cpx;color: #fff">Awesome!</text>
  13.   </c-tip>
  14.   <text class="tip-btn" c-bind:tap="showTip2">chameleon-ui</text>
  15. </view>
  16. <button class="btn"  c-bind:onclick="showTip2Top" text="top"></button>
  17. <button class="btn"  c-bind:onclick="showTip2Bottom" text="bottom"></button>
  18. <button class="btn"  c-bind:onclick="showTip2Left" text="left"></button>
  19. <button class="btn"  c-bind:onclick="showTip2Right" text="right"></button>
  20. </page>
  21. </template>
  22. <script>
  23. class CTip {
  24.   data = {
  25.     showtip1: false,
  26.     showtip2: false,
  27.     direction: "top"
  28.   }
  30.   computed = {
  31.     tipStyle() {
  32.       let style;
  33.       switch (this.direction) {
  34.         case "top":
  35.           style =
  36.             "position:absolute;top:0;left: 260cpx;";
  37.           break;
  38.         case "bottom":
  39.           style =
  40.             "position:absolute;top:164cpx;left: 260cpx;";
  41.           break;
  42.         case "left":
  43.           style = "position:absolute;left:20cpx;top:93cpx;";
  44.           break;
  45.         case "right":
  46.           style = "position:absolute;left:480cpx;top:93cpx;";
  47.           break;
  48.       }
  49.       return this.$cmlStyle(style);
  50.     }
  51.   }
  53.   methods = {
  54.     closeTip1(){
  55.       this.showtip1=false;
  56.     },
  57.     showTip1(){
  58.       this.showtip1=true;
  59.     },
  60.     closeTip2(){
  61.       this.showtip2 = false;
  62.     },
  63.     showTip2(){
  64.       this.direction="top";
  65.       this.showtip2 = true;
  66.     },
  67.     showTip2Top(){
  68.       this.direction="top";
  69.       this.showtip2 = true;
  70.     },
  71.     showTip2Bottom(){
  72.       this.direction="bottom";
  73.       this.showtip2= true;
  74.     },
  75.     showTip2Left(){
  76.       this.direction="left";
  77.       this.showtip2=true;
  78.     },
  79.     showTip2Right(){
  80.       this.direction="right";
  81.       this.showtip2=true;
  82.     }
  83.   }
  84. }
  86. export default new CTip();
  87. </script>
  88. <style scoped>
  89. .container {
  90.   display: flex;
  91.   flex-direction: column;
  92. }
  93. .tip-eg {
  94.   width: 750cpx;
  95.   align-self: center;
  96.   padding: 100cpx 0;
  97.   position: relative;
  98.   display: flex;
  99.   flex-direction: column;
  100. }
  101. .tip-btn {
  102.   padding: 9cpx 10cpx;
  103.   border: 1px solid #fc9153;
  104.   border-radius: 4cpx;
  105.   font-size: 24cpx;
  106.   color: #fc9153;
  107.   align-self: center;
  108. }
  109. .btn {
  110.   margin-top: 20cpx;
  111.   align-self: center;
  112. }
  113. </style>
  114. <script cml-type="json">
  115. {
  116.   "base": {
  117.     "usingComponents": {
  118.       "c-tip": "cml-ui/components/c-tip/c-tip"
  119.     }
  120.   }
  121. }
  122. </script>