zoukankan      html  css  js  c++  java
  • contextmenu="supermenu" 属性的应用 右键菜单打开和保存功能

     <div ng-class="{'chat-dialog-news-mine':{{item.isOwn}},'chat-dialog-news-other':{{!item.isOwn}},'chat-dialog-news-file':{{item.content_type == 6}},'chat-dialog-news-mine-file':{{item.isOwn}}&&{{item.content_type == 6}},'chat-dialog-news-other-file':{{!item.isOwn}}&&{{item.content_type == 6}}}" msgId="{{item.imdn_id}}">
                    <div contextmenu="supermenu" ng-right-click="decrement_right($event,item)">
                        <i class="icon warn-icon" ng-if="item.isWarn"></i>
                        <i ng-class="{true: 'icon {{item.status}}', false: ''}[{{item.isOwn && item.status !== ''}}]"></i>
                        <i ng-class="{true: 'bubble-icon right-icon', false: 'bubble-icon left-icon'}[{{item.isOwn}}]"></i>
                        <span compile='item.content|trustHtml' ng-click="newsClick($event, item)" ng-dblclick="newsDBClick($event, item)"></span>
                    </div>
    <!--设置右键弹出样式-->
        <div class="supermenus" id="supermenu" ng-show="iscontextMenus">
            <ul>
                <li ng-click="openRightClick($event)">打开</li>
                <li ng-click="preserveRightClick($event)">保存</li>
            </ul>
        </div>

    //点击任意出关闭右键弹窗
            $(document).off('click').on('click', function(e) {
                $scope.iscontextMenus = false;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            })
    //二人会话和群会话消息,右键打开文件功能
            $scope.openRightClick = function ($event) {
                openRightFile ($event);
            }
            function openRightFile ($event) {
                $event.stopPropagation();
                $event.preventDefault();
                $scope.iscontextMenus = false;
                var content_type = items.content_type,//消息的类型是文本消息还是图片消息还是文档消息
                    $curTarget = angular.element($event.currentTarget);
                switch (content_type){
                    case eucTypes.rcsTypes.ContentType.ContentTypePICTURE:
                        const exec = require('child_process').exec;
                        exec('"' + items.file_path + '"');
                        break;
                    case eucTypes.rcsTypes.ContentType.ContentTypeOTHER:
                        if ((messageService.FILE_STATE.RECEIVE_SUCCESS == items.file_state) ||
                            (messageService.FILE_STATE.SEND_SUCCESS == items.file_state)) {
                            const exec = require('child_process').exec;
                            exec('"' +items.file_path + '"');
                        }
                        break;
                    default :
                        break;
                }
            };
            //二人会话和群会话消息,右键保存文件功能
            const remote = require('electron').remote;
            var fs = require('fs');
            $scope.preserveRightClick = function($event){
                $event.stopPropagation();
                $event.preventDefault();
                $scope.iscontextMenus = false;
            electron调用后返回的回调是一个文件的路径; const saveFilePath
    = remote.dialog.showSaveDialog(remote.getCurrentWindow(), {defaultPath:items.file_name} ); var fileReadStream = fs.createReadStream(items.file_path); var fileWriteStream = fs.createWriteStream(saveFilePath); fileReadStream.pipe(fileWriteStream); fileWriteStream.on('close',function(){ console.log('copy over'); }); }
    electron框架提供的应用;
    const remote = require('electron').remote;
    remote.dialog.showSaveDialog(remote.getCurrentWindow(), {defaultPath:"abc.txt"});
    
    node.js fs模块文件的读入和写出
    var fs = require('fs');  
    var fileReadStream = fs.createReadStream('./myjpg.jpg');  
    var fileWriteStream = fs.createWriteStream('./new_myjpg.jpg');  
    fileReadStream.pipe(fileWriteStream);  
    fileWriteStream.on('close',function(){  
      console.log('copy over');    
    }); 

    上下文contenxmenu属性的应用; id="supermenu"

  • 相关阅读:
    vuex
    JS判断浏览器类型和详细区分IE各版本浏览器
    javascript json对象操作(基本增删改查)
    react 使用antd 按需加载
    vue-cli 3.0 豆瓣api接口使用element做分页
    vue-cli 3.0 使用axios配置跨域访问豆瓣接口
    es6之扩展运算符 三个点(...)
    Vue.js——十分钟入门Vuex
    js数组的处理使用
    如何发布自己模块到NPM
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6400168.html
Copyright © 2011-2022 走看看