# All files / src/components CustomDragElement.vue

0% Statements 0/2
100% Branches 0/0
0% Functions 0/2
0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41

     <template>
        <span class="text">
            {{text}}
        <button>xxx</button>
        <span class="vue-draggable-handle"></span>
        </span>
    </template>
    <style>
        .vue-draggable-handle {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
            background-position: bottom right;
            padding: 0 8px 8px 0;
            background-repeat: no-repeat;
            background-origin: content-box;
            box-sizing: border-box;
            cursor: pointer;
        }
    </style>
    <script>
        export default {
            name: "CustomDragElement",
            props: {
                text : {
                    type: String,
                    default: "x",
                },
            },
            data: function() {
                return {
                }
            },
            mounted: function() {
                console.log("### " + this.text + " ready!");
            },
        }
    </script>